Forum Moderators: open
This is what I would like to do:
If the 2nd is checked, I have a description text box that I would like to become mandatory.
If the 3rd is checked, I have a description text box that I would like to become mandatory.
If 2nd and 3rd are both checked, I have a description text box that I would like to become mandatory.
Here is the the validation script I have used to make sure that at least one of those CHECKBOXES has been checked.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
function Validate(){
// require that at least one checkbox be checked
var checkSelected = false;
for (var i = 0; i < document.formname.chkFundsFor.length; i++){
if (formname.chkFundsFor[i].checked)
checkSelected = true;
}
if (!checkSelected){
alert("Please identify what WILL RAFFLE FUNDS BE FOR:");
return (false);
}
// 2nd checkbox clicked makes TEXTBOX 2 mandatory
if (document.formname.chkFundsFor[1].checked && document.formname.txtBox2.value == ""){
alert("Please enter some text in txtBox 2");
document.formname.txtBox2.focus()
return (false);
}
// 3rd checkbox clicked makes TEXTBOX 3 mandatory
if (document.formname.chkFundsFor[2].checked && document.formname.txtBox3.value == ""){
alert("Please enter some text in txtBox 3");
document.formname.txtBox3.focus()
return (false);
}
return true
}
//-->
</script></head>
<body>
<form name="formname" onsubmit="return Validate();" action="http://www.vicsjavascripts.org.uk" >
<input type="checkbox" name="chkFundsFor" value="hi1"><br>
<input type="checkbox" name="chkFundsFor" value="hi2"><br>
<input type="text" name="txtBox2" value=""><br>
<input type="checkbox" name="chkFundsFor" value="hi3"><br>
<input type="text" name="txtBox3" value=""><br>
<input type="submit" value="Submit"><br>
</form>
</body>
</html>
I've tried in Firefox 1.7 and it doesn't work and I tried it in IE and it works fine. Does any body have an idea why it isn't working in FF 1.7?
Thanks
Although it's not why it's broken, you should reference form objects by id, makes life easier.
I changed the method a little so it captures *all* messages at once, and allows the submit to be managed by your function by passing the form object to it.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script type="text/javascript">
function Validate(form){
var msg='';
var chks = new Array('chkFundsForhi1','chkFundsForhi2','chkFundsForhi3');
// require that at least one checkbox be checked
var checkSelected = false;
for (i=0;i<chks.length;i++){
if (document.getElementById(chks[i]) && document.getElementById(chks[i]).checked) {
checkSelected = true;
break;
}
}
if (!checkSelected){
msg='Please identify what WILL RAFFLE FUNDS BE FOR.\n';
}
// 2nd checkbox clicked makes TEXTBOX 2 mandatory
if (document.getElementById(chks[1]) && document.getElementById('txtBox2')) {
if (document.getElementById(chks[1]).checked &&
(document.getElementById('txtBox2').value == '')){
msg += 'Please enter some text in txtBox 2.\n';
document.getElementById('txtBox2').focus();
}
}
// 3rd checkbox clicked makes TEXTBOX 3 mandatory
if (document.getElementById(chks[2]) && document.getElementById('txtBox3')) {
if (document.getElementById(chks[2]).checked &&
(document.getElementById('txtBox3').value == '')){
msg += 'Please enter some text in txtBox 3.\n';
document.getElementById('txtBox3').focus();
}
}
if (msg != '') { alert(msg); }
else { form.submit(); }
return false;
}
</script></head>
<body>
<form name="formname" onsubmit="return Validate(this);" action="">
<p><input type="checkbox" name="chkFundsForhi1" id="chkFundsForhi1" value="hi1"></p>
<p><input type="checkbox" name="chkFundsForhi2" id="chkFundsForhi2" value="hi2"></p>
<p><input type="text" name="txtBox2" id="txtBox2" value=""></p>
<p><input type="checkbox" name="chkFundsForhi3" id="chkFundsForhi3" value="hi3"></p>
<p><input type="text" name="txtBox3" id="txtBox3" value=""></p>
<p><input type="submit" value="Submit"></p>
</form>
</body>
</html>
