Welcome to WebmasterWorld Guest from 54.163.168.15

Forum Moderators: open

validating that at least two checkboxes ticked.

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

5+ Year Member



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)

5+ Year Member



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)

5+ Year Member



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)

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



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)

 

Featured Threads

Hot Threads This Week

Hot Threads This Month