JavaScript - Detect Which Submit Button Was Clicked
Hi everyone,
Let's say i have a form that looks like this: <form name="myForm" action="myPage" onsubmit="return validateForm();"> <input type="text" name="myInput" size="10"> <input type="submit" name="add" value="Add this"> <input type="submit" name="cancel" value="Cancel this"> </form> What i'm trying to do is for the validateForm() function to either redirect the page if "Cancel this" is clicked, or continue processing if "Add this" was clicked. So the validateForm() would work something like this: function validateForm() { if (cancel button is clicked){ location.href=go some place } else{ do some other stuff } } So, how can dynamically detect which submit button was clicked, before submitting the form? (that would fill in the "cancel button is clicked") I tried with document.myForm.cancel.selected and other variations but it always returns undefined. Any input will be greatly appreciated. Thanks! Similar TutorialsHi I'm new to javascript, so this is probably very simple. I've created a form with combobox with different values (this is for my website). What I want is when the user clicks 'submit' that it goes to a different page on the website depending on the value the person has selected in the combobox. Values are numerical, for example 1000, 2000, 5000 etc. I've been trying this for a couple of days now without success! Thanks in advance How can I make this code disable the submit button once it has been pressed, then if the user hits back or GOES back, it will re-enable it again? Code: <SCRIPT LANGUAGE="JavaScript" TYPE="text/JavaScript"> function formControl(submitted) { if(submitted=="1") { commentForm.Submit.disabled=true alert("Thanks for your comments!") } } </SCRIPT> Thanks! ShadowIce~ I want to show the div when a button is clicked. And the div will enter the page by sliding in (from the left of the page). When it got clicked again, the div will dissapear by sliding out from the page. Any suggestions? Thank You. I have three divs, Step 1, Step 2, Step 3. I'm trying to get it so when a person clicks the Facebook Like, the style changes to none and Step 2 is revealed and when the Facebook Share is clicked, the Step 3 is revealed. But when I like the first thing, it doesn't change to Step 2. Any thoughts? Code: <div id="Step1"><table border="0" width="630" height="174" background="images/step1-2.jpg"><tr><td valign="top" align="left" style="padding-left: 215px; padding-top: 80px"><br /> <iframe src="http://www.facebook.com/plugins/like.php?href=LINKHERE&layout=standard&show_faces=false&width=450&action=like&font=arial&colorscheme=light&height=35" scrolling="no" action="like" frameborder="0" style="border:none; overflow:hidden; width:450px; height:35px;" allowTransparency="true"></iframe> <br /> </tr></td></table></div><div id="Step2" ><table border="0" style="display: none" width="630" height="174" background="images/step2-2.jpg"><tr><td valign="top" align="left" style="padding-left: 210px; padding-top: 82px"><br /> <a name="fb_share" type="button" share_url="LINKHERE"></a> <script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"> </script> <br /> </tr></td></table></div><div id="Step3" style="display: none"><table border="0" width="630" height="174" background="images/step3-2.jpg"><tr><td valign="top" align="left" style="padding-left: 210px; padding-top: 72px"><br /> <center><a href="LINKHERE">Download Here</a> </center></tr></td></table></div><br /> <script type="text/javascript"> window.fbAsyncInit = function() { FB.init({appId: 'ID HERE', status: true, cookie: true, xfbml: true}); FB.Event.subscribe('edge.create', function() { document.getElementById('Step1').style.display = 'none'; document.getElementById('Step2').style.display = 'block'; document.getElementById('Step3').style.display = 'none'; setTimeout('document.getElementById(\'Step1\').style.display = \'none\';document.getElementById(\'Step2\').style.display = \'none\';document.getElementById(\'Step3\').style.display = \'block\';', 7000); }); }; (function() { var e = document.createElement("script"); e.type = 'text/javascript'; e.src = document.location.protocol + "//connect.facebook.net/en_US/all.js"; e.async = true; document.getElementById("fb-root").appendChild(e); }()); </script> I have 4 rows in a table. Each row consist of 4 radio buttons. Each radio button per row has different values in it but has the same name (group) ex: <input type="radio" name="a" value="1"> <input type="radio" name="a" value="2"> <input type="radio" name="a" value="3"> <input type="radio" name="a" value="4"> <input type="radio" name="b" value="1"> <input type="radio" name="b" value="2"> <input type="radio" name="b" value="3"> <input type="radio" name="b" value="4"> and so on.. If I click radio button A with value 2, I want to output the total at the bottom as "2".. Also, if I click radio button B with value 3, I want to output the total of A and B as 5 and so on.. How can I automatically calculate the answer based on which radio button was click? update: I got my answer from this site: http://stackoverflow.com/questions/1...s-using-jquery I have created some online software which uses form data to submit to another page. The problem is that I have other submit buttons in the same form which submit to different pages (depending on which button is pressed). The first submit button works fine but all the others only work once. Code: <input class="cssbutton" type='submit' value='Button1' onclick="wbform.action='page1.php'; target='mainFrame'; return true;"> <input class="cssbutton" type='submit' value='Button2' onclick="wbform.action='page2.php'; target='_blank'; return true;"> <input class="cssbutton" type='submit' value='Button3' onclick="wbform.action='page3.php'; target='topFrame'; return true;"> <input class="cssbutton" type='submit' value='Button4' onclick="wbform.action='page4.php'; target='topFrame'; return true;"> <input class="cssbutton" type='submit' value='Button5' onclick="wbform.action='page5.php'; target='_blank'; return true;"> <input class="cssbutton" type='submit' value='Button6' onclick="wbform.action='page6.php'; target='_blank'; return true;"> Any ideas my friends? So I have a new window document write which outputs all my data after validation into a new window, I have tried to write a button which will (when clicked) send that information to an email address. here is my code so far. i spent about 2 hours checking and playing around looking for errors couldnt find any. I think the problem is the function EmailForm and function subwrite. Is a button written into a new window a common thing to do? or is there another simpler way, however i want the user to be able to check to see if there data is valid and then click to send the email. Code: <HTML> <!--learn to program through JavaScript--> <mymerch.HTML> <HEAD> <TITLE> mymerch </TITLE> <SCRIPT LANGUAGE=JavaScript> //declaringvariables var firname; var surname; var phonenumber; var emailaddress; var streetnamenumber; var yoursuburb; var postcode; var yourstate; var product1; var product2; var product3; var product4; var product5; var product6; var product7; var product8; var totalc; var paymethods; var method; var value; var Cost; var numericExpression; var alphaExpression; var sendemail; var subject; var message; var mailto_link; var win; function main() { //open function main //function main which validates all data //declaring variables firname = document.merch.firstname.value; surname = document.merch.lastname.value; phonenumber = document.merch.phonenum.value; emailaddress = document.merch.emailadd.value; streetnamenumber = document.merch.stnamenum.value; yoursuburb = document.merch.suburb.value; postcode = document.merch.pcode.value; yourstate = document.merch.state.value; if (firname == "") { alert("Please fill in your Firstname.") document.merch.firstname.value.focus() return true; } //checks to see if no data as been entered and alerts the user if so. alphaExpression = /[a-zA-z]/; if(document.merch.firstname.value.match(alphaExpression)){ }else{ alert("You can only enter letters in the firstname field") document.merch.firstname.value.focus() return false; } //checks to see if the data entered is letter and if not true returns false. if (surname == "") { alert("Please fill in your Surname.") document.merch.lastname.value.focus() return false } //checks to see if no data as been entered and alerts the user if so. alphaExpression = /[a-zA-z]/; if(document.merch.lastname.value.match(alphaExpression)){ }else{ alert("You can only enter letters in the lastname field") document.merch.lastname.value.focus() return false; } //checks to see if the data entered is letter and if not true returns false. numericExpression = /^[0-9+\ ]+$/; if(document.merch.phonenum.value.match(numericExpression)){ }else{ alert("You can only enter numbers in the Phonenumber field") document.merch.phonenum.value.focus() return false; } //checks to see if the data entered is a number and if not true returns false. if(document.merch.phonenum.value.length <7) { alert("The Phone Number you have entered is not valid it contains less than 7 digits.") document.merch.phonenum.focus() return false } //checks to see if the phone number is less than 7 and if so returns false. if(document.merch.phonenum.value.length >10) { alert("The Phone Number you have entered is not valid it contains more than 10 digits.") document.merch.phonenum.focus() return false } //If phone number is more than 10 return false if (emailaddress == "") { alert("Sorry, your email address is not valid. You didn't enter anything."); document.merch.emailadd.focus() return false } //checks to see if no data as been entered and alerts the user if so. if (emailaddress.indexOf("@")==-1) { alert("Sorry, your email address is not valid. It doesn't have an @ symbol"); document.merch.emailadd.focus() return false } //checks to see if the data has an "@" and alerts the user if false. if (emailaddress.indexOf(".")==-1) { alert("Sorry, your email address is not valid. It doesn't have .COM"); document.merch.emailadd.focus() return false } //checks to see if the data has an dot and alerts the user if false. if (emailaddress.indexOf(" ")!=-1) { alert("Sorry, your email address is not valid. It has a space!"); document.merch.emailadd.focus() return false } //checks to see if the data has an space and alerts the user if false. if (streetnamenumber == "") { alert("Please fill in your Street Name and Number.") document.merch.stnamenum.value.focus() return false } //checks to see if the data is empty and alerts the user if true. if (document.merch.suburb.value == "") { alert("Please fill in your Suburb.") document.merch.suburb.value.focus() return false } //checks to see if the data is empty and alerts the user if true. alphaExpression = /[a-zA-z]/; if(document.merch.suburb.value.match(alphaExpression)){ }else{ alert("You can only enter letters in the Suburb field") document.merch.suburb.value.focus() return false; } //checks to see if the data entered is a letter and if not true returns false. if(document.merch.pcode.value.length <3) { alert("The postcode you have entered is not valid.") document.merch.pcode.value.focus() return false } //checks to see if the data has less than 3 characters and alerts the user if true. numericExpression = /^[0-9+\ ]+$/; if(document.merch.pcode.value.match(numericExpression)){ }else{ alert("You can only enter numbers in the postcode field") document.merch.pcode.value.focus() return false; } //checks to see if the data entered is a number and if not true returns false. if(document.merch.pcode.value.indexOf(" ")!=-1) { alert("The postcode you have entered is not valid.") document.merch.pcode.value.focus() return false } //checks to see if the data has a space and alerts the user if true. if (document.merch.state.value == "Select") { alert("Please select your state") document.merch.state.focus() return true } //checks to see if the data has been selected and alerts the user if false. paymentmeth(); openNewWin(); subWrite(); //calling the two functions } function paymentmeth() { for (i = 0; i < document.merch.payway.length; i++){ if (document.merch.payway[i].checked == true){ //a loop that is used to determine the paymethod and checks to see if data has been entered method = document.merch.payway[i].value //declares method }//ends IF }//ends //error control for nothing checked if (method == false) { //if method equals nothing show alert // this fails to validate alert("You forgot to select Pay Method.") } //document.merch.paytype.value = method; } function emailForm(){ sendemail = "micha3l26@hotmail.com"; subject = "Order Details"; message = ("Clients Information firstname is "+firname +" Surname is "+ surname +" PhoneNumber is "+ phonenumber +" EmailAddress is "+ emailaddress +" Street Name and Number is "+ streetnamenumber +" Suburb is "+ yoursuburb +" Postcode is "+ postcode +" State is "+ yourstate +" Payment Method is "+ method +" Total Payment is "+ Cost); mailto_link = ('mailto:'+sendemail+'?subject='+subject+'&body='+message); win = window.open(mailto_link,"emailWindow"); if (win && win.open &&!win.closed)win.close(); } //ends function function openNewWin() { var newWin; newWin = window.open("","newWin","status,height=600,width=600") //opens the window and sets it 600px by 600px } //open new window function subWrite() { if (newWin.closed) { makeNewWin() } newWin.focus() var image = "<img src=quote.jpg>"; //declares variable image as the banner jpg newWin.document.write(image) //document writes the variable image newWin.document.write("<br/>"); newWin.document.write("<br/>"); newWin.document.write("Your FirstName is "+firname); //writes the variable into the new document newWin.document.write("<br/>"); newWin.document.write("Your Surname is "+surname); //writes the variable into the new document newWin.document.write("<br/>"); newWin.document.write("Your PhoneNumber is "+phonenumber); //writes the variable into the new document newWin.document.write("<br/>"); newWin.document.write("Your EmailAddress is "+emailaddress); //writes the variable into the new document newWin.document.write("<br/>"); newWin.document.write("Your Street Name and Number is "+streetnamenumber); //writes the variable into the new document newWin.document.write("<br/>"); newWin.document.write("Your Suburb is "+yoursuburb); //writes the variable into the new document newWin.document.write("<br/>"); newWin.document.write("Your Postcode is "+postcode); //writes the variable into the new document newWin.document.write("<br/>"); newWin.document.write("Your State is "+yourstate); //writes the variable into the new document newWin.document.write("<br/>"); newWin.document.write("Your Pay Method is "+method); //writes the variable into the new document newWin.document.write("<br/>"); newWin.document.write("Your total payment is "+Cost); //writes the variable into the new document newWin.document.write("<br/>"); newWin.document.write("<input type="button" onClick="emailForm()" value="Send Email"/> "); //("<div style="border:2px solid black;padding:10px;"> //Please <a href="#" onclick="emailForm();">Email Support</a> //</div>"); //a document write to input a button, with an onclick function to mailto a email address var newContent = "</BODY></HTML>" newWin.document.write(newContent) newWin.document.close() // close layout stream } //calling the two functions //the send email button does not work. function tally() { //the function that calculates the prices of tshirts Cost =0; //sets the cost at 0 if (document.merch.tshirt1.checked) { Cost = Cost + parseInt(document.merch.tshirt1.value); } //cost which is 0 + the tshirt value equals the price of tshirt 1 //repeated 8 times if (document.merch.tshirt2.checked) { Cost = Cost + parseInt(document.merch.tshirt2.value); } if (document.merch.tshirt3.checked) { Cost = Cost + parseInt(document.merch.tshirt3.value); } if (document.merch.tshirt4.checked) { Cost = Cost + parseInt(document.merch.tshirt4.value); } if (document.merch.tshirt5.checked) { Cost = Cost + parseInt(document.merch.tshirt5.value); } if (document.merch.tshirt6.checked) { Cost = Cost + parseInt(document.merch.tshirt6.value); } if (document.merch.tshirt7.checked) { Cost = Cost + parseInt(document.merch.tshirt7.value); } if (document.merch.tshirt8.checked) { Cost = Cost + parseInt(document.merch.tshirt8.value); } document.merch.Total.value = "$"+Cost; } </script> Code: <style type="text/css"> <!-- .style1 { font-family: Century Gothic; color: #FFFFFF; } .style3 {font-family: Century Gothic; color: #FFFFFF; font-size: 24px; } .style5 {color: #000000} --> <!--Declaring the different styles of text !--> </style></HEAD> <BODY BGCOLOR="BLACK"> <div align="center"><img src="mymerchbanner.jpg" width="787" height="158"> <!The placement of the main banner> </div> <HR> <FORM NAME="merch" onSubmit="main()"> <!declaring the forms name and onsubmit run the function main> <table width="368" border="1" bordercolor="#000000" bgcolor="#000000"> <tr> <td width="187" height="40"><span class="style3">First Name: </span></td> <td width="165"><input type="text" name="firstname" id="firstname"></td> </tr> <!firstname textboxes> <tr> <td height="45"><span class="style3">Last Name: </span></td> <td><input type="text" name="lastname" id="lastname"></td> </tr> <!lastname textboxes> <tr> <td height="44"><span class="style3">Phone Number:</span></td> <td><input type="text" name="phonenum" id="phonenum"></td> </tr> <!phonenumber textboxes> <tr> <td height="43"><span class="style3">Email Address:</span></td> <td><input type="text" name="emailadd" id="emailadd"></td> </tr> <!emailaddress textboxes> <tr> <td><span class="style3">Street Name and Number:</span></td> <td><input type="text" name="stnamenum" id="stnamenum"></td> </tr> <!streetnameandnumber textboxes> <tr> <td height="43"><span class="style3">Suburb:</span></td> <td><input type="text" name="suburb" id="suburb"></td> </tr> <!suburb textboxes> <tr> <td height="42"><span class="style3">Postcode:</span></td> <td><input type="text" name="pcode" id="pcode"></td> </tr> <!postcode textboxes> <tr> <td height="42"><span class="style3">State:</span></td> <td> <select name="state" id="state"> <option value="SA">SA</option> <option value="TAS">TAS</option> <option value="QLD">QLD</option> <option value="VIC">VIC</option> <option value="NSW">NSW</option> <option value="ACT">ACT</option> <option value="NT">NT</option> <option value="WA">WA</option> <option value="Select" selected>Click to select</option> </select> </td> </tr> <!state selection> </table> <p> </p> <p class="style3">What Would you Like Today? </p> <table width="684" border="0" bordercolor="#000000" bgcolor="#000000"> <tr> <td width="79" class="style1">0001</td> <td width="79">2<span class="style1">0002</span></td> <td width="79"><span class="style1">0003</span></td> <td width="79"><span class="style1">0004</span></td> <td width="79"><span class="style1">0005</span></td> <td width="79"><span class="style1">0006</span></td> <td width="79"><span class="style1">0007</span></td> <td width="79"><span class="style1">0008</span></td> </tr> <tr> <td><img src="1.png" width="100" height="100"></td> <td><img src="2.png" width="100" height="100"></td> <td><img src="3.png" width="100" height="100"></td> <td><img src="4.png" width="100" height="100"></td> <td><img src="6.png" width="100" height="100"></td> <td><img src="8.png" width="100" height="100"></td> <td><img src="9.png" width="100" height="100"></td> <td><img src="10.png" width="100" height="100"></td> </tr> <!tshirt images for the 8 shirts> <tr> <td><input type="checkbox" name="tshirt1" Value="15" onClick="tally()"> ></td> <td><input type="checkbox" name="tshirt2" Value="15" onClick="tally()"> ></td> <td><input type="checkbox" name="tshirt3" Value="15" onClick="tally()"> > </td> <td><input type="checkbox" name="tshirt4" Value="30" onClick="tally()"> > </td> <td><input type="checkbox" name="tshirt5" Value="30" onClick="tally()"> > </td> <td><input type="checkbox" name="tshirt6" Value="15" onClick="tally()"> > </td> <td><input type="checkbox" name="tshirt7" Value="15" onClick="tally()"> > </td> <td><input type="checkbox" name="tshirt8" Value="15" onClick="tally()"> > </td> </tr> <!8 checkboxes with diffent values that are used to add up the prices and onclick run function tally> <tr> <td class="style1">$15</td> <td class="style1">$15</td> <td class="style1">$15</td> <td class="style1">$30</td> <td class="style1">$30</td> <td class="style1">$15</td> <td class="style1">$15</td> <td class="style1">$15</td> </tr> <!text for prices> </table> <td> Total <INPUT TYPE="text" NAME="Total" value="0" size="7"></td> <p class="style3">How Will you Like to Pay? </p> <table width="268" border="0" align="center" bordercolor="#000000"> <tr> <td width="196" class="style3">Cash on Delivery </td> <td width="56"><input name="payway" type="radio" value="Cash"onClick="paymentmeth()"></td> </tr> <!radio button with different values and onclick run paymentmeth> <tr> <td class="style3">Bank Deposit </td> <td><input name="payway" type="radio" value="Bank Deposit"onClick="paymentmeth()"></td> </tr> <tr> <td class="style3">Paypal</td> <td><p> <input name="payway" type="radio" value="Paypal"onClick="paymentmeth()"> <label></label> </p></td> </tr> </table> <p> </p> <p align="center" class="style3"> <INPUT TYPE="SUBMIT" VALUE="Show Invoice" onSubmit="main()"> <!submit button that runs function> <span class="style5"> </span> <input type="RESET" /> <!reset button that runs function> <span class="style5"> </span> </p> </FORM> </BODY> </HTML> Hi I am trying to trigger an event once the user clicks the browsers back/forward buttons, I have built a system just like facebook where if the user has javascript turned on they get the full feature of the site which includes fast switching for example if someone goes to this page "example.com/index.php" and click a link to contact.php it would change the url to "example.com/index.php#!/contact.php" but what I need to know is if there is any way to change the pages content when the user goes back and forth through the fast switch pages? something like "history.back !== -1" or something like that. If anyone can help please reply, thank you. Hi guys, I've been breaking my brains for few hours, I already searched online and I found nothing so far. What I wanna do.... I have 5 different images linked to 5 different websites. Once the image is clicked, the first link will be displayed in an iframe, and the image will change to the second one. Once we click on the second image, the second link will be displayed using the same iframe, and so on. The code changes the images,but I dunno how to deal with the link to the websites. This is the code: Code: <html> <head> <title>Testing...</title> </head> <script type="text/javascript"> imgs=Array("1.png","2.png","3.png","4.png","5.png"); links=Array("www.vbct.ca","www.cnn.com","www.castanet.net","www.yahoo.com","www.cubaweb.cu"); var x=0; function change() { document.getElementById("changes").src=imgs[++x]; if (x==4) { x=-1; } } if (!imgs[x+1]) { x=-1; } </script> <body> <div> <iframe src="http://www.vbct.ca" style="border: 0; position:relative; top:0; left:0; right:0; bottom:0; width:100%; height:400px;" name="page" width="100%"></iframe> </div> <br /><br /> <div> <a href="#" target="page"><img src="1.png" id="changes" alt="alttext" onmousedown="change()" style="cursor: pointer;" /></a> </div> </body> </html> And this is the link to the test page: http://www.virtualbc.ca/sites/test/ I am building an online survey using a survey creation tool which allows me to incorporate javascript for additional functionality. However, I am new to javascript so would appreciate any help that you could provide me with. I have question types like agreement scales, where the respondent sees a list of statements and has to rate each one by clicking on a radio button. The source code of the matrix table looks like this: Code: <thead><tr class="Answers"> <th class='c1 BorderColor' width="25%" class='c1'> </th> <th class='c2 BorderColor' class='c2 yAxisBorder' > </th> <th class='c3 BorderColor' class='c3 yAxisBorder' > </th> <th width="25%" class='Selection BorderColor c4 ' id='header~QID19~1~4' > <label>Disagree</label> </th> <th width="25%" class='Selection BorderColor c5 ' id='header~QID19~2~5' > <label>Neither agree nor disagree</label> </th> <th width="25%" class='Selection BorderColor c6 last ' id='header~QID19~3~6' > <label>Agree</label> </th> </tr></thead><tr class='ChoiceRow '><th class='c1' id='header~QID19~1'><span class='LabelWrapper'><label for='QR~QID19~1'>Statement 1</label></span> </th><td class='c2 BorderColor' class='c2 yAxisBorder' headers='header~QID19~1' > </td><td class='c3 BorderColor' class='c3 yAxisBorder' headers='header~QID19~1' > </td><td class='c4 ' headers='header~QID19~1~4 header~QID19~1'><input type='radio' name='QR~QID19~1' value='QR~QID19~1~1' ></td><td class='c5 ' headers='header~QID19~2~5 header~QID19~1'><input type='radio' name='QR~QID19~1' value='QR~QID19~1~2' ></td><td class='c6 last ' headers='header~QID19~3~6 header~QID19~1'><input type='radio' name='QR~QID19~1' value='QR~QID19~1~3' ></td></tr><tr class='ChoiceRow ReadableAlt '><th class='c1' id='header~QID19~2'><span class='LabelWrapper'><label for='QR~QID19~2'>Statement 2</label></span> </th><td class='c2 BorderColor' class='c2 yAxisBorder' headers='header~QID19~2' > </td><td class='c3 BorderColor' class='c3 yAxisBorder' headers='header~QID19~2' > </td><td class='c4 ' headers='header~QID19~1~4 header~QID19~2'><input type='radio' name='QR~QID19~2' value='QR~QID19~2~1' ></td><td class='c5 ' headers='header~QID19~2~5 header~QID19~2'><input type='radio' name='QR~QID19~2' value='QR~QID19~2~2' ></td><td class='c6 last ' headers='header~QID19~3~6 header~QID19~2'><input type='radio' name='QR~QID19~2' value='QR~QID19~2~3' ></td></tr><tr class='ChoiceRow bottom '><th class='c1' id='header~QID19~3'><span class='LabelWrapper'><label for='QR~QID19~3'>Statement 3</label></span> </th><td class='c2 BorderColor' class='c2 yAxisBorder' headers='header~QID19~3' > </td><td class='c3 BorderColor' class='c3 yAxisBorder' headers='header~QID19~3' > </td><td class='c4 ' headers='header~QID19~1~4 header~QID19~3'><input type='radio' name='QR~QID19~3' value='QR~QID19~3~1' ></td><td class='c5 ' headers='header~QID19~2~5 header~QID19~3'><input type='radio' name='QR~QID19~3' value='QR~QID19~3~2' ></td><td class='c6 last ' headers='header~QID19~3~6 header~QID19~3'><input type='radio' name='QR~QID19~3' value='QR~QID19~3~3' ></td></tr><input type=hidden name='Transformation~QID19~1' value='YToxOntzOjEwOiJRUn5RSUQxOX4xIjtzOjE2OiJ7dmFsdWV9PVNlbGVjdGVkIjt9' id=''><input type=hidden name='Transformation~QID19~2' value='YToxOntzOjEwOiJRUn5RSUQxOX4yIjtzOjE2OiJ7dmFsdWV9PVNlbGVjdGVkIjt9' id=''><input type=hidden name='Transformation~QID19~3' value='YToxOntzOjEwOiJRUn5RSUQxOX4zIjtzOjE2OiJ7dmFsdWV9PVNlbGVjdGVkIjt9' id=''></table></div> I don't have any control over the HTML as this is generated by the survey tool. However, the survey tool has a "JavaScript Editor" for each question, where I can put in javascript functions, and it executes them when the page loads. What I want to do is to have the label for each row (i.e for each statement) to change color when a corresponding radio button has been selected. This way, it is easier for respondents to see which rows they have answered. I used the following JS code: Code: var radioname = []; var radiolist = []; var labelspans = []; var labels = []; var radios = []; var count; var spans = document.getElementsByTagName('span'); function getLabels() { for (x=0; x<spans.length; x++) { if (spans[x].className == "LabelWrapper") { labelspans.push(spans[x]); } } for (y=0; y<labelspans.length; y++) { labels.push(labelspans[y].firstChild); radioname.push(labelspans[y].firstChild.htmlFor); } } function getRadios() { //will put all radio groups into the "radiolist" array for (z=0; z<radioname.length; z++) { radiolist.push(document.getElementsByName(radioname[z])); //will add Event Listener to each radio button, and add each one to the "radios" array for (i=0; i<radiolist[z].length; i++) { chkradio = radiolist[z][i]; chkradio.setAttribute("count",Number(z)); chkradio.addEventListener("click", function(){changeLabel()}, false); radios.push(chkradio); } } } function changeLabel() //loops through all the radios to check if they are selected, and changes label color accordingly { for (w=0; w<radios.length; w++) { if (radios[w].checked) { a = radios[w].getAttribute("count"); labels[a].innerHTML = labels[a].innerHTML.fontcolor("green"); } } } getLabels(); getRadios(); This code works as intended; however, as you can see, it loops through all the radio buttons when one is clicked. Is there a way to accomplish this without looping through all the radios, and thus make the script run faster? Also, I have read that the addEventListener function does not work for older versions of IE. Is there a simpler alternative? I am trying to auto submit a login form remotely using .submit() . It's submitting, but for some reason if I use submit() the login isn't processing. However, if I turn off the auto submit and use an actual submit button it logs in just fine. Now, in the form tag there is a call onsubmit for some validation, does .submit() trigger that form onsubmit="" function? Is there something that happens differently when a user clicks a button verses the .submit(). Thanks! Paul I am looking for some help similar to this old post: http://www.codingforums.com/showthread.php?t=19588 I want my radio buttons to become submit buttons as well. So when a user clicks on a radio button it submits the action and refreshes the page accordingly. As of now using only using onclick="this.form.submit()" the page only refreshes with no change. Here is a copy of the entire form. It is a custom shipping options form (I did not create it). Any help would be appreciated. Code: <!-- Custom shipping form --> <form action="" method="post" name="update_shipping"> <table width="300"> <tr> <td><label> <input <?php if (!(strcmp($_SESSION['shippingmethod'],"1"))) {echo "checked=\"checked\"";} ?> name="grpshipping" type="radio" id="grpshipping_0" value="1" checked="checked" onclick="this.form.submit()"/> Ground Shipping</label></td> <td class="style261"><?php echo date("m/d/Y",$grounddelivery);?></td> <td class="style261">$<?php if(($_SESSION['roundedweight']) >= 21){ echo number_format($row_rsshippingprices['Ground'] + ($row_rsshippingpricesover21['Ground'] * ($varWeightover)) ,2); } else { echo number_format($row_rsshippingprices['Ground'],2); } ?></td> </tr> <?php if($rainbowcart->ConditionalTotal("Quantity", "groundshiponly", "1") == 0) {//show other shipping options ONLY if a ground shipping only item is not in the cart ?> <tr> <td><label> <input <?php if (!(strcmp($_SESSION['shippingmethod'],"2"))) {echo "checked=\"checked\"";} ?> type="radio" name="grpshipping" value="2" id="grpshipping_1" onclick="this.form.submit()" /> Fedex 3 Day</label></td> <td class="style261"><?php echo date("m/d/Y",$fedex3delivery);?></td> <td class="style261">$<?php if(($_SESSION['roundedweight']) >= 21){ echo number_format($row_rsshippingprices['Fedex3'] + ($row_rsshippingpricesover21['Fedex3'] * ($varWeightover)) ,2); } else { echo number_format($row_rsshippingprices['Fedex3'],2); } ?></td> </tr> <tr> <td><label> <input <?php if (!(strcmp($_SESSION['shippingmethod'],"3"))) {echo "checked=\"checked\"";} ?> type="radio" name="grpshipping" value="3" id="grpshipping_2" onclick="this.form.submit()"/> Fedex 2 Day</label></td> <td class="style261"><?php echo date("m/d/Y",$fedex2delivery);?></td> <td class="style261">$<?php if(($_SESSION['roundedweight']) >= 21){ echo number_format($row_rsshippingprices['Fedex2'] + ($row_rsshippingpricesover21['Fedex2'] * ($varWeightover)) ,2); } else { echo number_format($row_rsshippingprices['Fedex2'],2); } ?></td> </tr> <tr> <td><label> <input <?php if (!(strcmp($_SESSION['shippingmethod'],"4"))) {echo "checked=\"checked\"";} ?> type="radio" name="grpshipping" value="4" id="grpshipping_3" onclick="this.form.submit()"/> Next Day PM</label></td> <td class="style261"><?php echo date("m/d/Y",$nddelivery);?></td> <td class="style261">$<?php if(($_SESSION['roundedweight']) >= 21){ echo number_format($row_rsshippingprices['ONPM'] + ($row_rsshippingpricesover21['ONPM'] * ($varWeightover)) ,2); } else { echo number_format($row_rsshippingprices['ONPM'],2); } ?></td> </tr> <tr> <td><label> <input <?php if (!(strcmp($_SESSION['shippingmethod'],"5"))) {echo "checked=\"checked\"";} ?> type="radio" name="grpshipping" value="5" id="grpshipping_4" onclick="this.form.submit()"/> Next Day AM</label></td> <td class="style261"><?php echo date("m/d/Y",$nddelivery);?></td> <td class="style261">$<?php if(($_SESSION['roundedweight']) >= 21){ echo number_format($row_rsshippingprices['ONAM'] + ($row_rsshippingpricesover21['ONAM'] * ($varWeightover)) ,2); } else { echo number_format($row_rsshippingprices['ONAM'],2); } ?></td> </tr> </table> <table class="eC_ButtonWrapper" border="0" cellpadding="0" cellspacing="0"> <tr> <td align="left"><center>Choose an option above and click update to change your shipping preference.<br /><b>PLEASE BE SURE AND PRESS UPDATE IF YOU CHANGE YOUR SHIPPING OPTION<br /><br /><input type="image" name="Update_shipping" id="Update_shipping" value="Update_shipping" alt="Update_shipping" src="WA_eCart/Images/Nautica/Btn4_EN_update.gif" class="eC_ImageButton" /></center></td> </tr> </table> <?php } //end of show if ground ship item is not in the cart?> <?php if($rainbowcart->ConditionalTotal("Quantity", "groundshiponly", "1") <> 0) { ?> <font color="red">The cart contains a Ground Shipping only item, this order can only be shipped ground</font><br /><br /> <?php } ?> </form> <!-- End of Custom shipping form --> Hello Wondering something, I created a form and have I have it submit when the user clicks the Submit button. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Assignment 4</title> <style type="text/css"> </style> </head> <body style="color: #009999; background-color: #000000"> <form action="mailto:whatisthematrix01@hotmail.com" name="frmCustomer" method="post"> <table style="width: 85%; height: 222px;"> <tr> <td> <img alt="Space Ship" height="223" src="spaceship_cg2.jpg" style="float: left" width="761" /></td> </tr> </table> <p> </p> <table style="width: 100%"> <tr> <td class="style1">Interstellar Shipping - Customer Registration </td> </tr> </table> <p> </p> <table class="style2"> <tr> <td class="style3"> First Name:</td> <td colspan="2" style="width: 273px"> <input id="Text1" type="text" name="Fname" /></td> </tr> <tr> <td class="style3"> Last Name</td> <td colspan="2" style="width: 273px"> <input id="Text2" type="text" name="Lname" /></td> </tr> <tr> <td class="style3"> City: </td> <td colspan="2" style="width: 273px"> <input id="Text3" type="text" name="UseCity" /></td> </tr> <tr> <td class="style3"> Country:</td> <td colspan="2" style="width: 273px"> <input id="Text4" type="text" name="UserCountry" /></td> </tr> <tr> <td class="style3"> E-Mail:</td> <td colspan="2" style="width: 273px"> <input id="Text6" name="userEmail" type="text" /></td> </tr> <tr> <td class="style3"> Username:</td> <td colspan="2" style="width: 273px"> <input id="Text5" type="text" name="Username" /></td> </tr> <tr> <td class="style3"> Password:</td> <td colspan="2" style="width: 273px"> <input id="Password1" type="password" name="Userpassword" /></td> </tr> <tr> <td class="style3" style="height: 35px"> Gender:</td> <td style="width: 307px; height: 35px;"> Male <input name="radGender" type="radio" value="radMale" /> Female <input name="radGender" type="radio" value="radFemale" /></td> <td style="width: 273px; height: 35px;"> </td> </tr> <tr> <td class="style3"> <input id="Submit1" type="button" value="submit" onclick="doSave()"/></td> <td colspan="2" style="width: 273px"> <input id="Reset1" type="reset" value="reset" /></td> </tr> </table> </form> <script Language = "JavaScript"> function ltrim(varIn) {/*Purpose: Trims the leading spaces from a string*/ var varOut = "" if(!varIn) { // string is null, so nothing to do } else // string has at least one character { for(intI=0; intI < varIn.length; intI++) { if(varIn.charAt(intI) != " ") { //first non-space char found so return //string from this character forward varOut = varIn.substring(intI) break } } } return varOut } function doSave() { var fOk = true var strSuperMessage var superFirstName = document.frmCustomer.Fname var superLastName = document.frmCustomer.Lname var superUserCity = document.frmCustomer.UseCity var superUserName = document.frmCustomer.Username var superUserPassword = document.frmCustomer.Userpassword var superUserEmail = document.frmCustomer.userEmail var checkDigit = /\d/; if ((ltrim(superFirstName.value)).length == 0) { fOk = false strSuperMessage = "First Name Required" superFirstName.focus() } else { if ((ltrim(superLastName.value)).length == 0) { fOk = false strSuperMessage = "Last Name Required" superLastName.focus() } else { if ((ltrim(superUserCity.value)).length == 0) { fOk = false strSuperMessage = "City Required" superUserCity.focus() } else { if ((ltrim(superUserName.value)).length == 0) { fOk = false strSuperMessage = "Username Required" superUserName.focus() } else { if ((ltrim(superUserEmail.value)).length == 0) { fOk = false strSuperMessage = "E-Mail Required" superUserEmail.focus() } else { if (superUserEmail.value.indexOf("@") == -1 || superUserEmail.value.indexOf(".")== -1) { fOk = false strSuperMessage = "The entered e-mail address is not " + "valid.\nE-mail addresses must " + "be in the form name@domain." superUserEmail.focus() } else { if (superUserPassword.value.search(checkDigit) ==-1) { fOk=false strSuperMessage = "Please enter at least one digit in your password field."; superUserPassword.focus() } else { if ((document.frmCustomer.radGender[0].checked==false) && (document.frmCustomer.radGender[1].checked==false)) { fOk = false strSuperMessage = "Gender Required" } } } }}}}} if(fOk) { document.frmCustomer.submit(); //window.location="http://www.google.com" } else alert(strSuperMessage) } </script> </body> </html> Is it okay if I redirect to Google like I did here. if(fOk) { document.frmCustomer.submit(); //window.location="http://www.google.com" } I can't do it in the form action, because I have the mailto link. Simply put, what I did in the if statement, is that okay, there would be no problem with it? I'm trying to get a submit button to open a thank you page I created (i.e. thankyou.html) only after the user has filled out a series of questions for a form. If they don't fill out the required information, a pop up box informs them to fill out the section (this I have accomplished). I cannot get the submit button to not work if the fields are left un-answered. Can you guys help? Thanks for you help. -------------------------------------------------------------------------- This is what I have so far: <title>Customer Demographic Data Form</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" ></meta> <style type="text/css"> body { font-family: Times New Roman; color: navy; background-color: #CCC } h1, h2, h5 { font-family: Times New Roman; color: black } body,td,th { color: #000; font-family: Times New Roman, Times, serif; } h1 { color: #000; } h2 { color: #000; } h5 { color: #000; } a { font-family: Times New Roman, Times, serif; } h1,h2,h3,h4,h5,h6 { font-family: Times New Roman, Times, serif; } </style> <script type="text/javascript"> function checkForNumber(fieldValue) { var numberCheck = isNaN(fieldValue); if (numberCheck == true) { window.alert("Please enter a numeric value!"); return false; } } function confirmSubmit() { var email = document.forms[0].email.value; if (document.forms[0].fname.value == "" || document.forms[0].lname.value == "") { window.alert("Please enter your first and last name."); document.forms[0].lname.focus(); return false; } else if (document.forms[0].address1.value == "" && document.forms[0].email.value == "") { window.alert("Please enter your Mailing Address or Email Address!"); document.forms[0].address1.focus(); return false; } else if (email.indexOf("@") == -1 && document.forms[0].email.value != "") { window.alert("Please enter a valid e-mail address."); document.forms[0].email.focus(); return false; } else if (email.indexOf(".") == -1 && document.forms[0].email.value != "") { window.alert("Please enter a valid e-mail address."); document.forms[0].email.focus(); return false; } else if(document.forms[0].city.value == '') { window.alert("Please enter your City"); document.forms[0].city.focus(); return false; } else if(document.forms[0].state.value == '') { window.alert("Please enter your State"); document.forms[0].state.focus(); return false; } else if(document.forms[0].zip.value == '') { window.alert("Please enter your Zip Code"); document.forms[0].zip.focus(); return false; } checkCookie() } function checkCookie() { var formInfo = decodeURI(document.cookie); var userInfo = formInfo.split("; "); var lname = userInfo[0].split("="); var fname = userInfo[1].split("="); if (lname[1] == document.forms[0].lname.value && fname[1] == document.forms[0].fname.value) { this.close(true); window.open("FormDenied.html"); return false; } else { setCookie(); return true; } } function setCookie() { var expiresDate = new Date(); expiresDate.setFullYear(expiresDate.getFullYear() + 1); document.cookie = encodeURI("lname=" + document.forms[0].lname.value) + "; expires=" + expiresDate.toUTCString(); document.cookie = encodeURI("fname=" + document.forms[0].fname.value) + "; expires=" + expiresDate.toUTCString(); window.alert("Your information has been saved."); } </script> </head> <body> <p> </p> <h1 align="left" style="text-align: left">Kudler Fine Foods contact form</h1> <form action="" method="get" enctype="application/x-www-form-urlencoded" onsubmit="return confirmSubmit();" onreset="return confirmReset();" > <blockquote> <h2><u>Name</u></h2> <p> <input type="text" name="fname" id="fname" size="25" /> <label for="fname"><strong>First Name</strong><br> <br> </label> <input type="text" name="lname" id="lname" size="15" /> <strong>Last Name</strong></p> <h2>---------------------------------------<br> <u>Address</u> </h2> <p> <input type="text" name="address1" id="address1" size="30" /> <label for="address1"><strong>Address Line 1</strong></label> </p> <p> <input type="text" name="address2" id="address2" size="20" /> <strong>Address Line 2<br> <br> </strong> <input type="text" name="city" id="city" size="20" /> <strong>City</strong> </p> <p> <input type="text" name="state" id="state" size="2" /> <label for="state2"><strong>State</strong></label> </p> <p> <input type="text" name="zip" id="zip" size="10" maxlength="10" onChange="return checkForNumber(this.value);" /> <label for="zip2"><strong>Zip Code</strong></label> </p> <h2>--------------------------------------- </h2> <h2> <u>Other Information</u></h2> <table> <tr> <td width=300><strong>Telephone</strong></td> <td width=300><p><strong>Email address:</strong></p></td> </tr> <tr> <td> <input type="text" name="area" id="area" size="3" maxlength="3" onChange="return checkForNumber(this.value);" /> <input type="text" name="exchange" id="exchange" size="3" maxlength="3" onChange="return checkForNumber(this.value);" /> <input type="text" name="phone" id="phone" size="4" maxlength="4" onChange="return checkForNumber(this.value);" /></td> <td> <input type="text" name="email" id="email" size="30" /></td> </tr> </table> </blockquote> <h5> </h5> <blockquote><blockquote> <h3 align="center"> <input name="Submit" type="button" </h3> </blockquote> </blockquote> </form> </body> </html> I need help making this timed quiz so when you hit submit it goes into a mysql database. right now it just tells you if you answered correctly or not Here is the code: what color is the grass? <input type = "text" id = "answer"> <input type = "button" id = "time" onclick="answer()"> <script type = "text/javascript"> var n = 60; // modify this for number of seconds to answer document.getElementById( 'time').value = "Answer in " + n + " seconds"; var i = setInterval('count()' , 1000); var tooLate; function count() { tooLate = 0; n--; if(n >=0) { document.getElementById( 'time').value = "Answer in " + n + " seconds"; } else { clearInterval(i); alert("Too late!"); document.getElementById('answer').value = ""; tooLate = 1; } } function answer() { var correct = "green"; // This is the correct answer if (tooLate == 0) { if(document.getElementById( 'answer').value == correct) { clearInterval(i); alert("Right Answer with " + n + " seconds remaining"); } else{ clearInterval(i); alert("Incorrect! The answer was " + correct); } } } </script> How exactly would you validate a form with JavaScript if instead of using the regular input type="submit" to allow submission you used input type="image"?
Hi all, i have seen that there is an input type 'reset' which i presum clears all fields in a form? But anyway i did not know this existed and my implementation requires a bit more sophistication so i had already written code to do a custom reset of the boxes whilst keeping and updating certain key values. This works fine. My question is, for the actual 'submit' of the data in a form do i have to use a button of type 'submit'? It is actually better for me in this instance that i do not as the special message windows i am using will close - and in the case of errors in the user input this is not desirable - so i have written the error handling etc with window staying open in mind, so that user can correct their errors and resubmit. To accomplish this i changed my input into type 'button' and it works fine When i click 'the submit button' it checks fields for valid data first - can i use its return value to somehow activate or not the actual form data sending? Like i have Code: <input type = "button" style = "font-size:18;" value= " Submit "onclick = "CheckValid()"/> I could be calling 'SendForm()' or something here instead and have check valid called from within SendForm() i norder to determin it's return type, how can i use this to decide if the form data is valid to send or not? and how could i use the return value in the html like this? should i A: think it is possible to send all the data from within the onclick function so i use that to decide if it gets sent from internal calls there and display thank you message if so, if not display error message. should i B: Disable the sending button until the fields contain valid data? Or use a second button to confirm data then allow a submit button to be pressed? Whenever I click the Submit button, which should create a new window showing all the details entered in the form, it doesn't work ideas? javascript.html Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>JavaScript</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15"> <!-- The external style sheets --> <link rel="stylesheet" type="text/css" href="mystyle.css"> <script type="text/javascript" src="myjavascript.js"></script> <meta name="keywords" content="CO332"> <meta name="description" content="CO332 Exercise Website"> <meta name="author" content="Bradley Berwick"> </head> <body> <div id="container"> <div id="maincontent"> <div id="header"> <h1> Exercise Website </h1> </div> <div id="leftnav"> <ul> <li><a href="index.html" >Home</a> <li><a href="myjavascript.html" ><span class="currentpage">Services</span></a> <li><a href="#" >TBA</a> <li><a href="#" >TBA</a> </ul> </div> <div id="content"> <h2>About Yourself</h2> <form name="exampleform"> <h3>Name: <input name="yourname" type="text"></h3> <h3>Age: <input name="age" type="text" size="3" Onchange = ' if ( !( this.value > 0 && this.value < 150 ) ) { alert( this.value + " is not a valid age."); this.value=""; // clear age text box }' > </h3> <h3>Gender: <input name="gender" type="radio" value="male"> Male <input name="gender" type="radio" value="female"> Female </h3> <h3>Your favourite colour: <select name="colours"> <option value="None"> <option value="red">Red <option value="green">Green <option value="blue">Blue <option value="pink">Pink <option value="orange">Orange <option value="purple">Purple </select> </h3> <h3>Your hobbies a <br> <input name="running" type="checkbox"> Running <br> <input name="football" type="checkbox"> Football <br> <input name="golf" type="checkbox"> Golf <br> <input name="cycling" type="checkbox"> Cycling </h3> <textarea rows="10" cols="30"> Add comments. </textarea> <p> <input type="reset" value="Clear"> <input name="submit" type="button" value="Submit" onclick='submitForm()';> </p> </form> </div> </div> <div id="footer"> <div id="mailto"> Last updated on 28th Oct 2011<br> Maintained by Bradley Berwick </div> </div> </div> </body> </html> myjavascript.js Code: function displayMessage(msg) { // Open a new window var msgWindow = window.open('', 'Message'); // Write message in the new Window msgWindow.document.write(msg); msgWindow.document.close(); // Raise this window, in case it's not visible msgWindow.focus(); } var hobstring=""; function submitForm() { var nam=document.exampleform.elements["yourname"].value; var age=document.exampleform.elements["age"].value; var gend = document.getElementsByName('gender'); for (var i = 0; i < gend.length; i++) { if (gend[i].checked==true) { var sex=gend[i].value; } } var sel=document.getElementById('color'); var color=sel.options[sel.selectedIndex].value; var hobbs = document.getElementsByName('hobby'); for (var a = 0; a < hobbs.length; a++) { if (hobbs[a].checked==true) { hobstring+=hobbs[a].id+", "; } } var msg="Name: "+nam+"<br>Age: "+age+"<br>Gender: "+sex+"<br>Favorite color: "+color+"<br>Hobbies: "+hobstring; displayMessage(msg); } <input type="image" src="uploads/button_in_cart.gif" border="0" alt="Add to Cart" title=" Add to Cart " onclick="addtocart(1);"> in addtocart function I do some checking how can i change that if after some checking my variable valid=0 that it does not allow the user to submit the form? Hi everyone, I have a problem with something I am trying to do. I have a submit button and once I press it I want it to add a post value to my website. For example my website is www.something.net/test.php and once I press it I want it to refresh the site and becomes something like www.something.net/test.php&ca=test In other words I want it to use POST and then using GET I can get the value of the POST. I have posted this under javascript because I believe I have a problem with the javascript I use. Here is the javascript and the button I use Javascript Code: function reload(val) { //var val=form.accept.id; self.location='test.php?ca=' + val ; } Button Code: <form name='form1' method='post' action='' STYLE='margin: 0px; padding: 0px;'> <input type='submit' name='accept' id='trial' value='Approve' onclick=\"reload(test)\" /> </form></div></td>"; Can you please help me with that? |