Welcome to WebmasterWorld Guest from 54.198.183.217

Forum Moderators: open

Message Too Old, No Replies

validating that at least two checkboxes ticked.

     
9:33 pm on Aug 19, 2007 (gmt 0)

Junior Member

5+ Year Member

joined:Aug 2, 2007
posts:59
votes: 0


hey folks!

I have a form with multiple checkboxes (name="ID[]"). I need to validate that form, two checkoboxes at least need to be ticked. If one or none are ticked, there should be a pop up (or ajax overlay) telling the user to select at least two. The form shouldnt submit unless that happens.

Ive found a few scripts that Ive tried to edit, but Im not getting it to work... as an example:

<script type="text/javascript" language="JavaScript">
function checkscript() {
var boxesTicked = ""
for (i = document.getElementsByName('chkboxes').length - 1; i >= 0; i--) {
if (document.getElementsByName('chkboxes')[i].checked) {
boxesTicked = boxesTicked + document.getElementsByName('chkboxes')[i].value + "\n"
}
}
if (boxesTicked == "") {
alert ("You must select a box to continue.")
return false
}
else {
alert (boxesTicked)
return true;
}
}
</script>

This script still submits the form even though the pop up warns. Also, the pop up wont show the error message, it shows the form parameters.

Can anyone point me int he right direction?

Thanks, Adam

10:04 pm on Aug 19, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:Nov 22, 2005
posts: 152
votes: 0


there is nothing wrong with the script as far as I can see. so may be you have html error. e.g you used onSubmit="function_name()" instead of onSubmit = "return function_name()".

Mohamed

10:25 pm on Aug 19, 2007 (gmt 0)

Junior Member

5+ Year Member

joined:Aug 2, 2007
posts:59
votes: 0


thanks, i didnt notice that.

I did notice though that the script I posted was the original, heres the edited version (for <2 checkboxes):

<script type="text/javascript" language="JavaScript">
function checkscript() {
var boxesTicked = ""
for (i = document.getElementsByName('chkboxes').length - 1; i >= 0; i--) {
if (document.getElementsByName('chkboxes')[i].checked) {
boxesTicked = boxesTicked + document.getElementsByName('chkboxes')[i].value + "\n"
}
}
if (boxesTicked <2 ) {
alert ("Please choose at least two models to compare.")
return false
}
else {
alert (boxesTicked)
return true;
}
}
</script>

So the box shows the correct message now, but still continues to the following page... and the box is shown when 2 or more boxes are ticked

thanks again, adam

3:07 pm on Aug 20, 2007 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts:4988
votes: 12


How are you calling checkscript?

As was already stated, your HTML should look something like this:

<form onsubmit="return checkscript();">

If you are missing that return, then your form will still submit.

(Note, this assumes you are using an inline onsubmit attribute of form)