|
JavaScript - Problem Submitting Forms With/without Javascript
I wonder if someone can help me.
I've recently put together a new web form. The form is validated using JavaScript - it shows real-time error messages when forms are left blank, and also prevents the form from being submitted if any of the input data is invalid. The problem I have is that if JavaScript is disabled, the form cannot be submitted. At the moment I am submitting the form using the following button Code: <input type="button" value="Next" onclick="submitForm(this.form);" id="button" /> The 'onclick' event runs the 'submitForm' function, which runs a final validation check and submits the form if everything checks out. If there is invalid data in the table, an alert box pops up which prevents the form from submitting. Unfortunately, if JavaScript is disabled, the 'Next' button does nothing, as it is relying on JS to submit the form. I have tried using <input type="submit"> as well as <button type="submit">. Both of these allow the form to be submitted if JS is disabled. Unfortunately, when JavaScript IS enabled, the validation gets bypassed - the alert box still shows up but once you click 'OK' the form gets processed anyway. Can anyone suggest a solution? I am planning to write server-side validation in PHP as a backup but would prefer it if my JavaScript validation would work in it's entirety and the PHP simply be in place as a last line of defence for when JS is disabled. Thanks! Similar TutorialsHello, I have 3 forms on one page each with their own submit button. I think it would be really helpful if all 3 could be submitted at the one time, with 1 button, and I think I'll prob need Javascript to do this. I want to submit the forms together, posting all the information to a php page that deals with it. Is this possible? I'm using php. Thanks, Nicky I have a simple form that works via a suggested results system (http://www.brandspankingnew.net/arch...uggest_v2.html) While in firefox the go button is greyed out and enter doesn't submit the form in IE pressing the enter key submits the form. Is there any way with a bit of javascript to stop IE from doing a form submission on enter but only for this form (since there are many more on the site) PHP Code: <form action="index.php" method="GET" name="qsform" id="qsform"><input type="hidden" name="p" id="p" value="compdetails" style="border:1px solid #000000;" /><input type="text" name="quicksearch" id="quicksearch" value="Find Company" style="border:1px solid #000000;" onFocus="clearText(this)" onBlur="clearText(this)" /><input type="hidden" name="cid" id="cid" value="" style="border:1px solid #000000;" /> <input type="submit" name="go" id="go" value="Go" disabled="true" /></form> I have a problem when submitting through javascript, i have used it hundred times, but i dont know why it refuses to work now, http://two.xthost.info/shailesh/test.htm Please look at the attached file in IE 6 and when you click on "Delete Selected" button, you get javascript error and the form refuses to submit the error is on line document.myform.submit(); I am using the following validation routine function savenotes() { if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { var result = xmlhttp.responseText.split("~"); alert(result[0]) if (result[0] == "1") { // alert(result[1]); alert("should return true"); valid = true; } else { alert(result[1]); valid = false; } } } var str = "ok"; var mypost = "check.asp" // alert(mypost); xmlhttp.open("GET", mypost, true); xmlhttp.send(); return valid; } now where do I put the return so that it returns to my form if it's valid or not. It doesn't seem to work to me and the form is always submitted I am calling this with <form method=post action=admin.asp onsubmit="return savenotes()"> I have created a small file where I check if the passwords entered in the code match or not, if they do not match, the button that links to the next webpage should not work(allow them to go to the next wepage). ive tried various websites to help me try and solve this but I just dodont understand what they are doing. I'm very new to programming btw here is some example code: Code: !doctypeHTML
<html>
<script>
//lets just pretend that ive already done all the .getelement by id stuff to get the code things
//suppose the person did not write anything in the form, an error will get pushed(alerted basically)
if(!form['password'].value)
error.push('Missing Password');
<form>
<label>Password<br><input type="password" name="password"></label>
<label>Confirm Password<br><input type="password" name="confirm"</label>
</form>
</html>
now how would I make the submit button not submit if there are errors? please be as simple as possible, I am new to this! Consider the following piece of code: PHP Code: <form method='post' name='myform'> <input type='submit' name='sub' value='submit 1' /> <input type='submit' name='sub' value='submit 2' /> <a href='javascript:document.myform.submit();'>submit 3</a> </form> <?php echo "You clicked ".$_POST["sub"]; ?> So if you click "submit 1", the output will be You clicked submit 1. And if you click "submit 2", the output will be You clicked submit 2. That's obvious. But ... what do I need to do to pass the key/value pair "sub" = "submit 3" to the server via POST when I click on the hyperlink showing "submit 3" - so that the output is You clicked submit 3 (i.e. so that $_POST contains "submit 3" referenced to index "sub"). I've tried <a href='javascript: a = {"x" : 1}; document.myform.submit(a);'>submit 3</a>, but that doesn't cause a to be passed via POST. Hello, I have the following DIV tag Code: <div id = "cbContainer"> </div> The div is initially hidden as the display is set to none. I have one text input in my form. Depending upon the changed text in that textbox, there is a javascript function which creates a list of checkboxes and by using the innerHTML, the above div is filled up with the check boxes like shown in the code below: Code: var chkboxes = '';
for(var r = 0; r < related.length; r++)
{
chkboxes = chkboxes +
'<div class ="versionswidth">'+
'<input type="checkbox" name="version" value = related[r] />'+ related[r] +
'</div>';
}
var div = document.getElementById("cbContainer");
div.innerHTML = chkboxes;
div display is then set as "block" which makes the div visible. The problem is that on form submission, the input of selected checkboxes is not submitting. I will be grateful for any help. Thank you. When I click Vacant after 5 and it goes to occupied. How would I make it come back to vacant when clicked again? Code: <html>
<head>
<script type="text/javascript">
function fillForm()
{
if (counter > 10){
}
}
</script>
<script type="text/javascript">
function StartCounting(){
setInterval("DoCounting()", 1000)
}
var Counter = 0;
function DoCounting(){
var obj = document.getElementById('countingtext');
obj.innerHTML = '' + Counter;
Counter++;
if( Counter > 5)
{
var obj1 = document.getElementById("closed").value = "Open";
var space1 = document.getElementById("space1")
space1.onclick = linkClick;
}
}
function linkClick(){
space1 = document.getElementById("space1").value = "Occupied";
}
</script>
</head>
<body onload= "StartCounting()">
Open at 5: <span id="countingtext"></span>
</body>
</html>
<div style="margin-right:3mm; " >
<form action="#" method="post" id="theForm" >
<input size="10" id="closed" value="Closed" style="text-align:center;" />
<script type="text/javascript">
</script>
<input type='button' id="space1" name='s"+
i+"' value='Vacant' onclick='readSpace(s"+
i+")' style='width:15mm;' /></td>
</form>
</div>
I'm having a total brain fart as to why this is happening. I just transferred my company's website from aplus.net servers to a linux based server on GoDaddy. My company's "shop" page has a drop down menu which should automatically re-direct you to a different page (on a different website where our shopping cart is hosted) when the option is selected. For some reason, after the switch to a different host, the option tags are no longer re-directing to the proper pages. Instead, they just tack on the value URL onto the existing URL and i just go in circles. javascript: <script language="JavaScript" type="/text/javascript"> function nav() { var w = document.myform.mylist.selectedindex.html; var url_add = document.myform.mylist.options[w].value; window.location.href = url_add; } </script> HTML for options form: <FORM NAME="myform"> <SELECT NAME="mylist" onChange="nav()"> <OPTION VALUE="http://bedvoyage.com/shop">Select Your Product <OPTION VALUE="http://bedvoyage.myshopify.com/products/twin-sheet-set">Sheet Set - Twin - $139.00 <OPTION VALUE="http://bedvoyage.myshopify.com/products/double-sheet-set">Sheet Set - Double - $159.00 <OPTION VALUE="http://bedvoyage.myshopify.com/products/queen-sheet-set">Sheet Set - Queen - $179.00 <OPTION VALUE="http://bedvoyage.myshopify.com/products/king-sheet-set">Sheet Set - King - $199.00 <OPTION VALUE="http://bedvoyage.myshopify.com/products/twin-pillow-case">Pillow Case - Twin - $20.00 <OPTION VALUE="http://bedvoyage.myshopify.com/products/double-pillow-case">Pillow Case Set - Double - $40.00 <OPTION VALUE="http://bedvoyage.myshopify.com/products/queen-pillow-case">Pillow Case Set - Queen - $42.00 <OPTION VALUE="http://bedvoyage.myshopify.com/products/king-pillow-case">Pillow Case Set - King - $45.00 <option value="http://bedvoyage.myshopify.com/products/zippered-travel-pillow-case">Zippered Travel Pillow Case - $19.00 <!-- <OPTION VALUE="http://bedvoyage.myshopify.com/produ...uot;>Travel Blanket - $39.00 --> </SELECT> </FORM> Is there an option on godaddy that i'm just missing out on that i'm too ignorant to notice? Thanks in advance. Hello, I need to solve the following task on my website: I have products with add to cart button, like this: Code: <form action="cart.php" method="post" id="_cart" name="_cart">
<input type="hidden" name="prodid" value="Product1" />
<a href="javascript: AddToCart()">
<img src="/images/design/buynow.gif" />
</a>
</form>
However, it doesn't work, since i have the same value under the name of each form: "_cart". Is there any way i still can send a form regardless the name of the form? I tried to use "onclick", like this: Code: <a href="javascript: void(0);" onclick="document._cart[0].submit();return false;"> However, i still have to change the value under the _cart element from 0 to the number of my forms. I need just submit a form itself, with the same form names. For some reason i cannt use the html submit button. Everything should be done with JavaScript. I beleive this text is not hard for understanding ) Look forward to your help Guys. hey guys, just wondering if u could help me out i'm writing a form for ordering pizza and i'm using a button to submit the info with an onclick event handler. for some reason it won't call the function that i want it to when the submit button is click. here is the code any idea what i'm doing wrong???? <html> <body> <form name="form1" action="popup" method="get"> <fieldset> <legend>Pizza Order form</legend> <p>Write in a First name</P> <input type="text" size="20" maxlength="50" name="firstName"></p> <p>Write in a last name (or surname):<br> <input type="text" size="20" maxlength="50" name="surName"></p> <p>Write in an email address:<br> <input type="text" size ="20" maxlegth="50 name="address"> <p>Are you a previous customer?:<br> <select name="precust"> <option selected>- - - - - - Select one - - - - - -</option> <option value="Yes">Yes</option> <option value="No">No</option> </select></p> <p>pickup or delivery:<br> <select name="delivery"> <option selected>- - - - - - Select one - - - - - -</option> <option value="pickup">pickup</option> <option value="dilivery">delivery</option> </select></p> <p>size:<br> <select name="size"> <option selected>- - - - - - Select one - - - - - -</option> <option value="small">small</option> <option value="medium">medium</option> <option value="large">large</option> <option value="XL">extra large</option> </select></p> <p>number of pizzas:<br> <select name="num"> <option selected>- - - - - - Select one - - - - - -</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select></p> <p>Toppings:<br> Bacon <input type="checkbox" name="bacon" value="bacon"><br> extra cheese <input type="checkbox" name="xcheese" value="extra cheese"><br> olives<input type="checkbox" name="olives" value="olives"><br> pepperoni<input type="checkbox" name="pepperoni" value="pepperoni"><br> mushrooms<input type="checkbox" name="mushrooms" value="mushrooms"><br> green pepper<input type="checkbox" name="gpepper" value="green pepper"><br> red pepper<input type="checkbox" name="rpepper" value="redpepper"><br> sausage <input type="checkbox" name="sausage" value="sausage"><br> ham<input type="checkbox" name="ham" value="ham"><br> pineapple<input type="checkbox" name="pineapple" value="pineapple"><br><br> <input type=button name="hawaiian" value="hawaiian" onclick=' document.form1.ham.checked = true; document.form1.mushrooms.checked = true; document.form1.pineapple.checked = true; document.form1.bacon.checked = false; document.form1.gpepper.checked = false; document.form1.rpepper.checked = false; document.form1.olives.checked = false; document.form1.pepperoni.checked = false; document.form1.sausage.checked = false; document.form1.xchees.checked = false; '> <input type=button name="meatlovers" value="meatlovers" onclick=' document.form1.ham.checked = false; document.form1.mushrooms.checked = false; document.form1.pineapple.checked = true; document.form1.bacon.checked = false; document.form1.gpepper.checked = true; document.form1.rpepper.checked = true; document.form1.olives.checked = true; document.form1.pepperoni.checked = false; document.form1.sausage.checked = false; document.form1.xcheese.checked = false; '> <input type=button name="vegetarian" value="vegetarian" onclick=' document.form1.ham.checked = true; document.form1.mushrooms.checked = false; document.form1.pineapple.checked = false; document.form1.bacon.checked = true; document.form1.gpepper.checked = false; document.form1.rpepper.checked = false; document.form1.olives = "unchecked" document.form1.pepperoni.checked = true; document.form1.sausage.checked = true; document.form1.xcheese.checked = false'> <p><input type=button name="submit" value="Submit" onclick='submit()'></p> </fieldset> </form> <script type="text/javascript" language="Javascript" > function submit() { var fname = document.form1.firstname.value; var lname = document.form1.surname.value; var address = document.form1.address.value; var size = document.form1.size.value; var num = document.form1.num.value; var delivery = document.form1.delivery.value; var precust = document.form1.precust.value; var price; var message; if(document.form1.size.value == "small"){price=5} if(document.form1.size.value == "medium"){price=8} if(document.form1.size.value == "large"){price=10} if(document.form1.size.value == "XL"){price=13} price = price * num; if(document.form1.precust.value == "yes"){price=price*0.9} if(document.form1.delivery.value == "delivery"){price=price+4} message = "Thank you " + fname + " " + lname; message += "You ordered " + document.form1.num.value + " " + document.form1.size.value + " pizzas. "; message += "Your total price is $" + price; var r=confirm(message);// displays the message in a pop-up return(1); } </script> </html> I have found a code to help me learn how to add forms in javascript, but it's limited to text input forms. Code: <script type="text/javascript"><!--
function updatesum() {
document.form.sum.value = (document.form.sum1.value -0) + (document.form.sum2.value -0);
}
//--></script>
Where the inputs sum1 and sum2 are text fields you put whatever numbers you want in. That works fine. Great. Now what I'm having trouble with is modifying the code so that it will add one form with an input number with a form that spits out a randomly generated number. Code: <input type="button" value="D20" onclick="this.form.display.value = Math.round (20 * Math.random())" class="buttonHi" /> <input name="display" type="text" size="6" value="" /> This is what I'm using for my random number generator. So basically I want to be able to put, say, 5, into the input text field above this. And then click on the d20 button to get a random number, say, 15, and then have the first code add the inputted 5 with the randomly generated 15. Is this possible? Hi, I am very new to Javascript and am having some difficulties with implementing two forms on the same page. The page in question is http://www.devoteddomains.com/contac...ed-domains.asp. The form at the top appears on every page and works on all of the other pages except this one. When you try to complete the form it validates the second form on the page. The code for the top form can be found he http://www.devoteddomains.com/web-de...vices-cta.html (it is an include file). The two scripts that I am using are as follows: Top Form: http://www.devoteddomains.com/scripts/scripts.js Contact Page Form: http://www.devoteddomains.com/scripts2/scripts.js Can someone please help! Cheers, Peter i am new to JavaScript and i have an assignment to create a tour calculator here is the code and its not working please help its urgent thanks. [code] <!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> .font { font-size: 28pt; } font2 { font-size: 15pt; } </style> </head> <body> <strong class="font">USA Tour Cost Calculator</strong> <br/> <br/> Conplete the form below to calculate the cost of your tour of the United States <script type="text/javascript"> function calculate(){ var cost=0; var accomodation=0 var radio1 var radio2 var duration=0 function accomodation() { for (var i=1; i<=3; i++) {radio1= document.getElementById("radio"+i); if (radio1.checked==true) {accomodation=i;}} if (accomodation=1){cost=parseInt(radio.value); return value;} else if (accomodation=2){cost=parseInt(radio.value); return value;} else if (accomodation=3) {cost=parseInt(radio.value);return value;} else {window.alert("Please select the type of accomodation")} } function peak() { var cost=accomodation() var peak=document.getElementById("check1") if (peak.checked==true) {cost +=parseInt(checkbox.value); return value;} else {cost=accomodation()} } function calc(){ var cost=peak() for (var i=1; i<=4; i++){ radio2=document.getElementById("Radiobutton"+i); if (radio2.checked==true) {duration=i;} if (duration=1) {cost*=parseInt(radio.value); return value;} else if (duraion=2){cost*=parseInt(radio.value); return value;} else if(duration=3) {cost*=parseInt(radio.value); return value;} else if(duration=4){caost*=parseInt(radio.value); return value;} else {alert("Please select the duration of tour")} } } </script> <br/> <form id="form2" name="form2" method="post" action=""> <p> <label> <input type="radio" name="RadioGroup2" value="95" id="Radio1" /> Camping</label> <br /> <label> <input type="radio" name="RadioGroup2" value="140" id="Radio2" /> Budget Hotel</label> <br /> <label> <input type="radio" name="RadioGroup2" value="170" id="Radio3" /> Premier Hotel</label> <br /> </p> </form> Click here if you will be travelling during the peak season of June to August: <input name="" type="checkbox" value="20" id="check1" /> <br/> <br/> Duration of tour: <form id="form1" name="form1" method="post" action=""> <label> <input type="radio" name="RadioGroup1" value="4" id="Radiobutton1" /> 4 days, 1sate</label> <br /> <label> <input type="radio" name="RadioGroup1" value="7" id="Radiobutton2" /> 7 dasy, 3 states</label> <br /> <label> <input type="radio" name="RadioGroup1" value="14" id="Radiobutton3" /> 14 days, 12 states</label> <br /> <label> <input type="radio" name="RadioGroup1" value="20" id="Radiobutton4" /> 20 days, 18 states</label> <br /> </p> </form> <br/> <p> <input type="submit" value="Calculate" onClick='alert("The total cost of your tour is $calculate();")'><input type="reset" value="Reset" /></p> </body> </html> [code] Hello, this is my first post here, but I'm having some trouble figuring out what I messed up on my code I'm making a Javascript game of Hangman for one of my classes and I originally had the input as a text box where you physically type in the letter and if it was wrong, it would draw the next sequence of the hangman picture and place the letter in another text box as a "Used Letters," or if you're right, it would place the letter you chose in the box for the word you're guessing. However, I decided that instead of doing that, I wanted to make it more visually appealing and add buttons with the letters on them instead. As you can see in the code which is down-loadable here (the one with the _2 is the one I'm currently using, but the original is supplied as well), the buttons register for the picture changing, but do not register for the "Used Letters" field or for filling in the actual word. One of the button's values is also replaced by "undefined" after each click of another button and I'm not really sure why If anyone could take a look at my code and see if you can figure out what the deal is, that'd be awesome! I cannot get the result right. I write area and phone by numbers but it still gives me error Code: function validate_text(field,alerttext) {
with(field) {
var re = /[a-zA-Z]/g;
if(re.test(field)) { return true;}else{alert(alerttext);return false;}
}
}
function validate_number(field,alerttext){
with(field) {
var re = /[0-9]/g;
if(re.test(field)) { return true;}else{alert(alerttext);return false;}
}
}
function validateForm(thisForm){
with(thisForm)
{
if(validate_number(area,"wrong area code") == false) {
area.focus();return false;
}
if(validate_number(phone,"wrong phone") == false) {
phone.focus();return false;
}
if(validate_text(name_surname,"wrong name") == false) {
name_surname.focus();return false;
}
}
}
Code: ...<b>Name Surname :</b><input style="margin-left:10px;" type="text" name="name_surname"/>
<br /><br />
<b>phone :</b><input type="text" style="margin-left:19px;" maxlength="4" size="4" name="area" />
-<input type="text" style="margin-left:5px;" maxlength="7" size="10" name="phone" /><br /><br />....
Hey guys, I use a newsletter service called Aweber to handle my blog's subscription service. What I have right now is a simple HTML form that I can have pass its variables through to a thank you page, so I can add customization there. The web form looks like this: Name: ________________ Email: ________________ Choose a free gift!: drop down list with "gift1" "gift2" or "gift3" as the choices. When a user submits the form, it will bring them to a custom thank you page, which I have made as "thank-you.php". On the "thank you" page, there is a javascript code that was given by Aweber which basically loads up all the variables... you can then CALL all of the variables in the page like this: <script type="text/javascript">formData.display("name")</script> ========================== So what's my question? I wanted there to be a display on the bottom that would allow users to download a different gift based on whether they chose gift 1, 2 or 3. I would also love to have there be an image of the ebook next to the download link depending on which book they chose. Is there a way I can pass variables through into an html <img> tag? (i.e. src="http://www.website.com/formData.display("gift").jpg" ... or something like that). Building off this, how would I generate a different download link based on the choice they made in the web form? (i.e. <a href="http://www.website.com/formData.display("gift").pdf"> or similar) Hopefully this all makes sense, let me know if you can help! |
|||||||