this code i am going to post is in the middle of a very long post so could be lost i am having problems making this work... <!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):
<script language="JavaScript"><!-- function VerifyData() { var testAClear = true; var testBClear = true; for (var i=0;i<2;i++) { if (document.testa.checked) testAClear=true; } if (!testAClear) {alert('You must chose a template for section testa');} for (var i=0;i<2;i++) { if (document.testb.checked) testBClear=true; } if (!testBClear) {alert('You must chose a template for section testb'); } if ((!testAClear) || (!testBClear)) return false else return true; } //-->
ok thanks... but there may be any number of radio groups on the page so i was trying to use something like.. <script language="JavaScript"><!-- function VerifyData() { var colGroup = document.getElementsByName('testa'); for (var i = 0; i < colGroup.length; i++) { if (colGroup[i].checked) return true; } alert('You must chose a template for section 1'); return false; var colGroup2 = document.getElementsByName('testb'); for (var a = 0; a < colGroup2.length; a++) { if (colGroup2[a].checked) return true; } alert('You must chose a template for section 2'); return false; } //--> </script> Code (markup): but it only checks the first box.. but it does check the first box just now need to sort out the fact its doesnt look at the second group.
this does the trick <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Untitled Document</title> </head> <body> <script type="text/javascript"> function validate(frm){ tag = document.getElementsByTagName("input"); res = ''; tagName = ''; errMsg = ''; for(x=0;x<tag.length;x++){ if(tag[x].type == 'radio' && tag[x].name != tagName){ tagName = tag[x].name; optStatus = checkRad(frm.name,tagName); //errMsg += optStatus; if(optStatus == false){ errMsg += 'You need to check an option for ' + tagName + '\n'; } } } if(errMsg != ''){ alert(errMsg); //alert(errMsg.replace(/<br>/g,'\n')); //document.getElementById('output').innerHTML = errMsg; return false; } else{ alert('Form OK'); } } function checkRad(frm,rad){ s = false; //s = 'You need to check an option for ' + rad + '<br>'; //alert('frm: ' + frm + '\nrad: ' + rad); //s = 'frm: ' + frm + '\nrad: ' + rad + '\n'; obj = document.forms[frm].elements[rad]; for(i=0; i<obj.length; i++){ if(obj[i].checked){ s = true; //s = rad + ': option ' + (i+1) + ' checked, value=' + obj[i].value; break; } } return s; } </script> <div id="output"></div> <form name="form1" id="form1" method="post" action="" onsubmit="return validate(this)"> <p> <fieldset> <legend>Options1</legend> <label> <input type="radio" name="Options1" value="One"> One</label> <br> <label> <input type="radio" name="Options1" value="Two"> Two</label> <br> <label> <input type="radio" name="Options1" value="Three"> Three</label> <br> </fieldset> </p> <p> <fieldset> <legend>Options2</legend> <label> <input type="radio" name="Options2" value="One"> One</label> <br> <label> <input type="radio" name="Options2" value="Two"> Two</label> <br> <label> <input type="radio" name="Options2" value="Three"> Three</label> <br> <label> <input type="radio" name="Options2" value="Four"> Four</label> <br> </fieldset> </p> <p> <fieldset> <legend>Options3</legend> <label> <input type="radio" name="Options3" value="One"> One</label> <br> <label> <input type="radio" name="Options3" value="Two"> Two</label> <br> <label> <input type="radio" name="Options3" value="Three"> Three</label> <br> </fieldset> </p> <input type="submit" name="Submit" value="Submit"> <input type="button" name="Button" value="Button" onclick="validate(this.form)"> <input type="reset" name="Reset" value="Reset"> </form> </body> </html> Code (markup):