Multiple lists - Checkbox validation with JS

[mpc]

I have a basic question and will appreciate your help. I searched quickly in the forum but couldn't find an answer.

Let's suppose I would like visitors to subscribe to either or both of two proposed newsletters. Let's call them "list 98" and "list 99". Obviously, visitors should check at least one checkbox.

I'm no javascipt geek, and I've been working on this snippet of code for over 24 hours now. Yeah! I can hear you laughing .

The thing is that my script works if the visitor checks one or two checkboxes, but if both are left unchecked, I get a bunch of warnings from signup.php! I must be missing something obvious here, I have no background in JS, just trial and error, and alot of fun!

So here's my JS code:

Code: [Select]


<script language="Javascript">

<!-- Function that checks that at least one box is checked
function notChecked( box )
{
   if( box.checked )
   {
   return false;
   }
    else
   {
   return true;
   }
}

// Checking the "form" as parameter
function checkForm( form )
{

// Now, checking if at least one checkbox is checked [Did I say we're checking something here? :)
// Should Field names be lists[], or lists[98] and lists[99], or something else?

// MY PROBLEM IS LOCATED HERE. NONE OF THESE WORKS
//   if( notChecked( form.lists98 ) & notChecked( form.lists99 ) )
//   if( notChecked( form.lists[98] ) & notChecked( form.lists[99] ) )
//   if( notChecked( form.lists[] ) )

   {
   alert( 'You should select at least one newsletter!' );
   return false;
   }
}
</script>



And here's my simple and basic form, for testing purposes only:

Code: [Select]


<form method="post" action="http://www.____.net/listmail/signup.php">

<input type="hidden" name="overwrite_dupes" value="1">

Subscribe to:<br>

<input type="checkbox" name="lists[]" value="98" checked> Newsletter 98<br>
<input type="checkbox" name="lists[]" value="99" checked> Newsletter 99

<input type="image" name="sup" src="send.gif" class="formElement" onclick="return checkForm(this.form)">
</form>



Thank you all in advance.
Marie
Quebec

[BTW, it is impossible to post a new topic here with Opera 9, or at least it is impossible to preview it and continue editing. I'm using FF 1.5 now]

[DW]

Code: [Select]

// MY PROBLEM IS LOCATED HERE. NONE OF THESE WORKS
//   if( notChecked( form.lists98 ) & notChecked( form.lists99 ) )
//   if( notChecked( form.lists[98] ) & notChecked( form.lists[99] ) )
//   if( notChecked( form.lists[] ) )
This is because lists is either empty/non-existent or, with two lists, can only ever have data as form.lists[0] or form.lists[1].  This is essentially the "name" of the var (for our style of array creation, an auto incrementing integer) and need not relate to the value.

If any list is selected data would appear in the

• position, so I might do something such as follows:

Code: [Select]

<form onSubmit="if(!form.lists[0].value){ alert('error'); return false; }">
Now, a better way might be by using the "standard" id element... I've heard this is much better for browser compatibility, but obviously takes more lines of code because each "id" must be checked individually similar to how you have done in your original solution.

For your form:

Code: [Select]

<input id=mylist98 type="checkbox" name="lists[]" value="98" checked> Newsletter 98<br>
<input id=mylist99 type="checkbox" name="lists[]" value="99" checked> Newsletter 99

And for your notChecked function, we use the W3C getElementById method..:

Code: [Select]

function notChecked( boxid )
{
   if( document.getElementById(boxid).checked )
   {
   return false;
   }
    else
   {
   return true;
   }
}
I don't know if this will work from within the function as expected.  I've only just started using this method.  Try a search for it on Google to get some more examples. :)

Hope that helps at least a bit! :D

[mpc]

Thank you Dean. I really appreciate your time and dedication.
I will follow your instructions later today, Google a bit, and do my best to make "da thing" work.

Thanks once again,
Marie

[mpc]

I thing I found it. I've tried this in IE7 Beta, FF 1.5.0.6 and Opera 9, and It does work fine. Thank you dean for showing me the right path. Indeed, working with getElementById and id's is a breeze. But I don't know if it will work in older browsers.

I don't know neither if my code is optimized, please do not hesitate to do so. Some comments if others are interested i using it:

First, I created a loop that counts the number of checkboxes (lists) in the array. We can add as many lists as we want in new Array ("id1","id2", "id_etc"). Then it verifies if they're checked. It prompts the user if none is selected.

Here's the JS script:

Code: [Select]

function validateChkBoxes()
{

var chkd = 0;
var ChkBxArray = new Array ("List98","List99");
for (var i = 0; i < ChkBxArray.length; i++)
{
if (document.getElementById(ChkBxArray[i]).checked)
{
chkd++;
}
}

if (chkd==0)
{
alert("You should check at least one box");
return false;
}
}

And the form:

Code: [Select]

<form method="post" action="listmail/signup.php" onsubmit="return validateChkBoxes();">

<input type="checkbox" name="lists[]" id="List98" value="98" checked>Newsletter 98<br>
<input type="checkbox" name="lists[]" id="List99" value="99" checked>Newsletter 99<br>

<input type="submit" name="Sup" value="Submit">
</form>
 
Thank you once again, for your help and for such great product.
Marie