SitePoint Sponsor |
|
User Tag List
Results 1 to 4 of 4
Thread: radio button form validation
-
Apr 5, 2006, 02:14 #1
- Join Date
- Dec 2005
- Posts
- 24
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
radio button form validation
Hi I'm trying to get some validation working on a set of form elements but my alert keep's on alerting regardless of the radio btn being checked. Can someone tell me what I'm doing wrong please.
Code:<html> <title>Radio Button Validation</title> <body bgcolor="#FFFFFF"> <script language="JavaScript"> function checkform() { if (!document.feedback.field.checked) { alert('There is a problem with...'); return false; } } </script> <form onSubmit="checkform()" name="feedback"> <input type="radio" value="A" name="field">A <br> <input type="radio" value="B" name="field">B <br> <input type="radio" value="C" name="field">C <br> <input type="radio" value="D" name="field">D <br> <input type="submit" value="Submit"> </form> </body> </html>
-
Apr 5, 2006, 03:10 #2
- Join Date
- Dec 2005
- Posts
- 24
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Solved the first bit to my problem, but I've got another problem as I'm not a strong JS programmer how can I tweak the script so that it checks more than one set of radio buttons as I'm building a questionnaire and will be asking more than one question ie. something like this:
Code:<html> <title>Radio Button Validation</title> <body bgcolor="#FFFFFF"> <script language="JavaScript"> function valbutton(thisform) { myOption = -1; for (i=thisform.myradiobutton.length-1; i > -1; i--) { if (thisform.myradiobutton[i].checked) { myOption = i; } } if (myOption == -1) { alert("You must select a radio button"); return false; } alert("your cool"); thisform.submit(); } </script> <form name="myform"> <input type="radio" value="1st value" name="myradiobutton" />1st<br /> <input type="radio" value="2nd value" name="myradiobutton" />2nd<br /> <input type="radio" value="3rd value" name="myradiobutton" />3rd<br /> <br /> <input type="radio" value="1st value" name="myradiobutton2" />a<br /> <input type="radio" value="2nd value" name="myradiobutton2" />b<br /> <input type="radio" value="3rd value" name="myradiobutton2" />c<br /> <br /> <input type="submit" name="submitit" onclick="valbutton(myform);return false;" value="Validate" /> </form> </body> </html>
-
Apr 5, 2006, 08:39 #3
- Join Date
- Mar 2006
- Location
- United Kingdom
- Posts
- 49
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
You can use multiple form names: myform1, myform2 and have the same radio button name that is myradiobutton or you can modify your function so that it passes the radiobutton instead of the form name. Therefore you will have only one form, that is myform and call your function like this: valbutton(myradiobutton1) or valbutton(myradiobutton2).
-
Apr 5, 2006, 08:47 #4
- Join Date
- Nov 2004
- Location
- Nelson BC
- Posts
- 2,310
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
In this example I made an array of the names of the radio buttons to check and loop through them:
Code:function valbutton(thisform) { var radios = ["myradiobutton1","myradiobutton2","myradiobutton3"]; for( var j=0; j < radios.length; j++ ) { myOption = -1; for (i=thisform.elements[radios[j]].length-1; i > -1; i--) { if (thisform.elements[radios[j]].checked) { myOption = i; } } if (myOption == -1) { alert("You must select a radio button for " + radios[j]); return false; } } alert("your cool"); thisform.submit(); }
To fix that, call the validate function in the onsubmit event of the form tag and make the function return true or false.
Bookmarks