homepage Welcome to WebmasterWorld Guest from 174.129.76.87
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
validating that at least two checkboxes ticked.
oxidetones

5+ Year Member



 
Msg#: 3426319 posted 9:33 pm on Aug 19, 2007 (gmt 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

 

Mohamed

5+ Year Member



 
Msg#: 3426319 posted 10:04 pm on Aug 19, 2007 (gmt 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

oxidetones

5+ Year Member



 
Msg#: 3426319 posted 10:25 pm on Aug 19, 2007 (gmt 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

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 3426319 posted 3:07 pm on Aug 20, 2007 (gmt 0)

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)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved