Hi. I am trying to make sure all radio boxes are checked when i submit a form this is the code i am trying but with no joy. <SCRIPT language="JavaScript"> <!-- function VerifyData() { if (document.getElementById('areha').value <= "") { alert ("You must chose a template for section areha"); return false; } if (document.getElementById('dfg').value <= "") { alert ("You must chose a template for section dfg"); return false; } if (document.getElementById('Downloads').value <= "") { alert ("You must chose a template for section Downloads"); return false; } if (document.getElementById('drgah').value <= "") { alert ("You must chose a template for section drgah"); return false; } if (document.getElementById('fdsaag').value <= "") { alert ("You must chose a template for section fdsaag"); return false; } if (document.getElementById('Home').value <= "") { alert ("You must chose a template for section Home"); return false; } if (document.getElementById('My test').value <= "") { alert ("You must chose a template for section My test"); return false; } if (document.getElementById('v').value <= "") { alert ("You must chose a template for section v"); return false; } else return true; } --> </SCRIPT> </head> <body> <form name="Template" method="post" action="next.asp" onSubmit="return VerifyData()"> areha <input type="radio" name="areha" id="areha" value="1" checked="checked" /> <input type="radio" name="areha" id="areha" value="3" /> <br> dfg <input type="radio" name="dfg" id="dfg" value="1" checked="checked" /> <input type="radio" name="dfg" id="dfg" value="3" /> <BR> Downloads <input type="radio" name="Downloads" id="Downloads" value="1" checked="checked" /> <input type="radio" name="Downloads" id="Downloads" value="3" /> <BR> drgah <input type="radio" name="drgah" id="drgah" value="1" checked="checked" /> <input type="radio" name="drgah" id="drgah" value="3" /> <BR> fdsaag <input type="radio" name="fdsaag" id="fdsaag" value="1" checked="checked" /> <input type="radio" name="fdsaag" id="fdsaag" value="3" /> <BR> Home <input type="radio" name="Home" id="Home" value="1" /> <input type="radio" name="Home" id="Home" value="3" checked="checked" /> <BR> My test <input type="radio" name="My test" id="My test" value="1" /> <input type="radio" name="My test" id="My test" value="3" /> <BR> v <input type="radio" name="v" id="v" value="1" checked="checked" /> <input type="radio" name="v" id="v" value="3" /> <BR> <input type="submit" name="submit" value="go"> </form> Code (markup): so there may be a lot groups of radio buttons where some of them have checked and some dont i just need to make sure that all are checked when the form is submitted. this code above is from active code so the amout of options wil vary.
Radio buttons are designed so that only one of them can be checked at a time. You cannot have multiple radio buttons of the same group (same name) checked. If this is what you want, use checkboxes.
Maybe i have not explained this properly i need to check that each group has a one radio box selected. ie you see the group 'my test' it doesnt have any one of the groups radio checked. i dont want to multi select..
var checkedareha = "false"; var count; for (count = 0; count<2; count++) { if (document.areha.[count].checked == true) { checkedareha = "true"; } } If (checkedareha == "false") { alert ("You must chose a template for section areha"); } Repeat the same thing for your other groups noting how many members are in the group, because this is what count<2 is checking allowing.
thanks.. i have been trying this,, how exactly does it fit into html when i have multiple radio groups.. so if i have <form name="Template" method="post" action="next.asp" > Home <input type="radio" name="Home" id="Home" value="1" /> <input type="radio" name="Home" id="Home" value="3" /> <BR> My test <input type="radio" name="My test" id="My test" value="1" /> <input type="radio" name="My test" id="My test" value="3" /> <input type="submit" name="submit" value="go"> </form> Code (markup): how would it work?
ok this works <SCRIPT language="JavaScript"> <!-- function VerifyData() { if (document.getElementById('areha').checked != true ) { alert ("You must chose a template for section areha"); return false; } else return true; } --> </script> </head> <body> <form name="Template" method="post" action="next.asp" onSubmit="return VerifyData()"> areha <input type="radio" name="areha" id="areha" value="1"/> <input type="radio" name="areha" id="areha" value="3" /> <input type="submit" name="submit" value="go"> </form> Code (markup):
Your radio buttons are grouped by their name. <input type="radio" name="Home" id="Home" value="1" /> <input type="radio" name="Home" id="Home" value="3" /> The first entry is document.Home.[0]) The first entry is document.Home.[1]) So we user a counter and walk through an array in postion zero and one var checkedhome = "false" for (count = 0; count<2; count++) { if (document.Home.[count].checked == true) which will check radio box [0] of the Home group (the first one) and radio box [1] of the group. If any of the two in the loop have a value of checked == true then we set the checked variable equal to true. { checkedhome = "true"; } If none of the are checked, then the checked variable remains false, and causes the error message box If (checkedhome == "false") { alert ("You must chose a template for section areha"); } You can duplicate this for each section. If you don't not wish to have multiple error boxes show up and would rather have one with all errorneous sections listed, you can assign each error message to a variable called errormsg var errorMsg = "the following section do not have at least one value selected: "; Then, as you find the error parts, you can add them onto this message one by one If (checkedhome == "false") { errorMsg = errorMsg + 'Home'; } So this will concatonate, (push together) all of the names (groups) that have been found in error,. For example, the final msg would read alert(errorMsg); which would actually display "the following section do not have at least one value selected "the following section do not have at least one value selected: Home, My Test" . But this is optional based on how you want your error msgs to display. Some people prefer multiple ones, rather than one listing all. Note: do not forget to encapsulate the second half of the concatonation into '' so that it knows it's a string. I'll be back in an hour if you have more questions
ok last attempt didnt work.. but if what u said is true why doesnt this work,, <SCRIPT language="JavaScript"> <!-- function VerifyData() { var checkedareha = "false"; var count; for (count = 0; count<2; count++) { if (document.areha.[count].checked == true) { checkedareha = "true"; } } If (checkedareha == "false") { alert ("You must chose a template for section areha"); } } --> </script> </head> <body> <form name="Template" method="post" action="next.asp" onSubmit="return VerifyData()"> areha <input type="radio" name="areha" id="areha" value="1"/> <input type="radio" name="areha" id="areha" value="3" /> <input type="submit" name="submit" value="go"> </form> Code (markup):
ok i think i am close.. but still no joy.. <!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> <script language="JavaScript"><!-- function VerifyData() { for (var i=0;i<2;i++) { if (document.testa[i].checked) return true; } alert('You must chose a template for section testa'); return false; for (var i=0;i<2;i++) { if (document.testb[i].checked) return true; } alert('You must chose a template for section testb'); return false; } //--> </script> </head> <body> <form name="Template" method="post" action="next.asp" onSubmit="return VerifyData();"> a<input type="radio" name="testa" id="testa" value="1" /> b<input type="radio" name="testa" id="testa" value="3" /> <br /> c<input type="radio" name="testb" id="testb" value="1" /> d<input type="radio" name="testb" id="testb" value="3" /> <br /> <input type="submit" value="go" /> </form> </body> </html> Code (markup):
Okay, joy coming, and explanation as well <SCRIPT language="JavaScript"> <!-- function VerifyData() { var checkedareha = "false"; var count; for (count = 0; count<2; count++) { if (document.areha.[count].checked == true) { checkedareha = "true"; } } If (checkedareha == "false") { alert ("You must chose a template for section areha"); } } --> </script> </head> <body> <form name="Template" method="post" action="next.asp" onSubmit="return VerifyData()"> areha <input type="radio" name="areha" id="areha" value="1"/> <input type="radio" name="areha" id="areha" value="3" /> <input type="submit" name="submit" value="go"> </form>
no joy.. doesnt work and shows this javascript error Error: missing name after . operator Source File: file:///C:/Documents%20and%20Settings/Dan/Desktop/test2.htm Line: 12, Column: 25 Source Code: if (document.areha.[count].checked == true)
try this, I think I missed the mention of the form in the DOM model. If you named your form, use the form name if (document.Template.areha.[count].checked == true)