PDA

Click to See Complete Forum and Search --> : Validate form: Any boxes checked?

dominick
05-30-2003, 11:28 AM
Hi everyone - many thanks for your help in the past and hopefully today as well.

After many hours of trying to understand arrays, I'm still confused...

My web page will display a list of names that are obtained from a call to a back-end DB. Each name will have a checkbox next to it, with a portion of the checkbox name dynamically generated - for example, the first checkbox in the list will be named "box1", the next "box2", etc. There may be only 1 checkbox on the page or there may be 1000, depending on how much data is retrieved from the back-end prior to the page loading.

What I need to do is run a JS check to determine if at least one checkbox has been checked before the form is submitted. I've crudely gotten it to work assuming that I indicate each specific element to validate, as you'll see below. Obviously that is not an efficient way to do this - what I need to do is simplify the script to determine if at least one box is checked, no matter how many checkboxes wind up on the page after it loads.

I've seen references to this question here in the forums but it's just not sinking in...Any help would be very much appreciated.

Regards,

Dominick

=============================================

<html>
<head>

<title>Check</title>

<script language="javascript" type="text/javascript">
<!--
function isChecked() {
if (MyForm.box1.checked || MyForm.box2.checked || MyForm.box3.checked) {
alert("Checked");
return true;
}
else {
alert("Unchecked");
}
return false;
}
//-->
</script>

</head>

<body>

<table border="1" cellpadding="0" cellspacing="1">
<form name="MyForm">
<tr>
<td align="center"><input type="checkbox" name="box1"></td>
</tr>
<tr>
<td align="center"><input type="checkbox" name="box2"></td>
</tr>
<tr>
<td align="center"><input type="checkbox" name="box3"></td>
</tr>
<tr>
<td><input type="submit" onClick="isChecked();" value="Submit"></td>
</tr>
</form>
</table>

</body>
</html>
Vladdy
05-30-2003, 11:32 AM
function isThereACheckedBox()
{
inputs = document.getElementsByTagName('input');
for(var i=0; i<inputs.length; i++)
if (inputs[i].type=='checkbox' && inputs[i].checked) return true;
return false;
}
dominick
05-31-2003, 01:29 PM
Vladdy:

Thanks so much - it works just fine - I will continue to stare at your solution in hopes of understanding what you've done here.

Thanks again,

Dominick
Jona
05-31-2003, 02:03 PM
To explain Vladdy's script (note: I don't take credit for the script just to help dominick learn)....


<script type="text/javascript">
<!--
function isThereACheckedBox() {
inputs = document.getElementsByTagName('input');
/*Get all of the input elements in the form, you can also use this for multiple forms on one page if you use inputs = document.formname.elements.length; or you can use inputs = f.elements.length; if you use isThereACheckedBox(this.form) in your event handler.*/
for(var i=0; i<inputs.length; i++)
/*Loop through all of the elements in the form.*/
if (inputs[i].type=='checkbox' && inputs[i].checked) return true;
/*If the input is a checkbox and it is checked, return true, or, let the form submit.*/
return false;
/*Don't let the form submit. This may seem illogical, but because the order, you don't need an else statement. If the check box number (referred to by "i") is checked, it will submit the form without continuing. If it doesn't find any of them checked, it will finish the function and end up returning false.*/
}
//-->
</script>
sneakyimp
06-08-2004, 09:01 PM
that is the most brilliant, compact piece of code i've seen in days. Do we have any idea what browsers it will work on?

getElementsByTagName looks like it might be pretty new. will it work on all browsers?
sneakyimp
06-08-2004, 09:11 PM
I also just realized that this script just checks to see if ANY checkbox on the entire form is checked.

I would like to adapt this script to work on my page...i have a single form with groups of checkboxes. i want to make sure that one checkbox within each group is checked.


<INPUT NAME="relationship_status[single]" TYPE="checkbox" VALUE="single" CHECKED>single<BR>
<INPUT NAME="relationship_status[married]" TYPE="checkbox" VALUE="married" CHECKED>married<BR>
<INPUT NAME="relationship_status[divorced]" TYPE="checkbox" VALUE="divorced" CHECKED>divorced<BR>
<INPUT NAME="relationship_status[discreet]" TYPE="checkbox" VALUE="discreet" CHECKED>discreet<BR>


any help would be much appreciated.
Kor
06-09-2004, 04:40 AM
1. First at all you should have used radio buttons, all with the same name (use values not names to send data to CGI) for a single possible choise (you can not be sigle and married at the same time, as you can not be dead and alaive the same time... :-).

2. Second... I presume you need to verify this onsubmit, so I used the event handler onsubmit to verify the condition. If condition is not fulfiled the code will alert than will return false (that means the submit process is aborted). If condition is fulfiled, return true, thus the data will be submited to CGI.

So your work could be something like this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script>
function verify(f){
var j=0;
for(var i=0;i<f.rad.length;i++){
if(f.rad[i].checked==false){j++}
}
if(j==f.rad.length){
alert('Please check an option on radio buttons!');
return false
}
else{return false}
}
</script>
</head>
<body>
<form onsubmit="return verify(this)">
<input name="rad" type="radio" value="relationship_status[single]">single<br>
<input name="rad" type="radio" value="relationship_status[married]">married<br>
<input name="rad" type="radio" value="relationship_status[divorced]">divorced<br>
<input name="rad" type="radio" value="relationship_status[single]">discreet<br>
<input type="submit" value="Submit">
</form>
</body>
</html>


The code is full cross-browser
Kor
06-09-2004, 04:45 AM
Sorry, a mistake was...

So, correct code should have return true, as I said:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script>
function verify(f){
var j=0;
for(var i=0;i<f.rad.length;i++){
if(f.rad[i].checked==false){j++}
}
if(j==f.rad.length){
alert('Please check an option on radio buttons!');
return false
}
else{return true}
}
</script>
</head>
<body>
<form onsubmit="return verify(this)">
<input name="rad" type="radio" value="relationship_status[single]">single<br>
<input name="rad" type="radio" value="relationship_status[married]">married<br>
<input name="rad" type="radio" value="relationship_status[divorced]">divorced<br>
<input name="rad" type="radio" value="relationship_status[single]">discreet<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
sneakyimp
06-09-2004, 01:01 PM
thanks for your response. and thanks for your code!

actually, the example i sent is probably really confusing. I do actually need checkboxes rather than radio buttons because this is for the search page, not for the profile page.

A user needs to be able to search the database and include/exclude people based on their marital status, eye color, hair color, etc. Thus for the category i call 'relationship_status', the user can choose to search only single people, single and divorced people, or even married people (i know how perverse that is but it's in the spec!).

i tried using the length property but it was always coming up 0...I think this is either because i have a checkbox series or because the name of each checkbox has a different index. currently, i'm using this code which seems to do what i want, but can't properly distinguish two different checkbox series where the name of one is a substring of the name of the other. that is to say, it would confuse "check1" with "check10".

<HTML>
<BODY>
<FORM ACTION="search.php?username=&userid=&sender_id=" METHOD="POST" NAME="search_form">
<SCRIPT LANUGAGE="Javascript">
<!--
function isThereACheckedBox(strInputName) {
var inputs = document.getElementsByTagName('input');
for(var i=0; i<inputs.length; i++) {
if (inputs[i].name.indexOf(strInputName) == 0) {
if (inputs[i].type=='checkbox' && inputs[i].checked) {
return true;
}
} // if
} // for
return false;
}

function SubmitAndValidate(myFormName) {
var myForm = document.forms[myFormName];


alert('relationship_status:' + isThereACheckedBox('relationship_status'));


//myForm.submit();

}
//-->
</SCRIPT>

<INPUT NAME="relationship_status[single]" TYPE="checkbox" VALUE="single" CHECKED>single<BR>
<INPUT NAME="relationship_status[married]" TYPE="checkbox" VALUE="married" CHECKED>married<BR>
<INPUT NAME="relationship_status[divorced]" TYPE="checkbox" VALUE="divorced" CHECKED>divorced<BR>
<INPUT NAME="relationship_status[discreet]" TYPE="checkbox" VALUE="discreet" CHECKED>discreet<BR>
</SPAN><BR>
<INPUT TYPE=BUTTON VALUE=SUBMIT ONCLICK="SubmitAndValidate('search_form');">
</FORM>
</BODY>
Vladdy
06-09-2004, 02:00 PM
Actually a better approach would be:

<fieldset id="relstatus">
<legend>Relationship Status</legend>
<label><input name="relationship_status[single]" type="checkbox" value="single" />single</label>
<label><input name="relationship_status[married]" type="checkbox" value="married" />Married</label>
<label><input name="relationship_status[divorced]" type="checkbox" value="divorced" />Divorced</label>
<label><input name="relationship_status[discreet]" type="checkbox" value="discreet" />Discreet</label>
</fieldset>

So that the function becomes

function isThereACheckedBox(groupParent)
{ var inputs = groupParent.getElementsByTagName('input');
for(var i=0; i<inputs.length; i++)
if (inputs[i].type=='checkbox' && inputs[i].checked)
return true;
return false;
}
And you call it from your form verification routine:
result=isThereACheckedBox(document.getElementById('relstatus'));