Javascript Checkbox Validation with <form>

Hey guys,

I have a form that includes numerous checkboxes. These checkboxes are for online articles (pdf files) that our visitors can purchase. I want to set a minimum of selecting at least 4 articles (checkboxes). Now, I am currently using shopping cart software so the <input name=""> tag needs to contain the name of the the article supplied by the shopping cart. eg. <input type="checkbox" name="mqty0" value="1">, <input type="checkbox" name="mqty1" value="1"> etc. I have a javascript that works great ONLY when the names of the input fields are changed to "checkbox". eg. <input type="checkbox" name="checkbox" value="1">. Now, this doesnt work correctly because nothing is inserted into the shopping cart because the name value is not valid. The name value needs to be "mqty0", "mqty1", mqty2" etc. Does anyone have an idea of what I can do to solve this? Maybe my javascript needs tweaked a little. I have posted the JS and form below. Thanks in advance for your help!!

JAVASCRIPT
<script Language="JavaScript">
<!--
function checkbox_checker()
{
                  
// set var checkbox_choices to zero
                  
var checkbox_choices = 0;
                  
// Loop from zero to the one minus the number of checkbox button selections
for (counter = 0; counter < checkbox_form.checkbox.length; counter++)
{
                  
// If a checkbox has been selected it will return true
// (If not it will return false)
if (checkbox_form.checkbox[counter].checked)
{ checkbox_choices = checkbox_choices + 1; }
                  
}
                  
if (checkbox_choices < 4 )
{
// If there were less then selections made display an alert box
alert("Please make three selections. \n" + checkbox_choices + " entered so far.")
return (false);
}
                  
// If three were selected then go to shopping cart
return (true);
}
                  
-->
</script>

FORM
<form method="post" action="http://(my shopping cart software)"
onsubmit="return checkbox_checker()" name="checkbox_form">
<table border="0" width="600">
      <tr>
       <td align="center"><b>Add</b></td>
      <td width="250"><b>Article Title</b></td>
       <td width="75">&nbsp;</td>
      <td align="center"><b>Add</b></td>
      <td width="250"><b>Article Title</b></td>
     </tr>
                                     
      <input type="hidden" name="msku0" value="D10010">
     <tr>
      <td width="50" align="center"><input type="checkbox" name="mqty0" value="1"></td>
       <td width="250">When Should I Start The Succession Plan?</td>
      <td width="75">&nbsp;</td>
      <input type="hidden" name="msku1" value="D10011">
       <td width="50" align="center"><input type="checkbox" name="mqty1" value="1"></td>
       <td width="250">Getting The New Generation Ready</td>
     </tr>
                                     
      <input type="hidden" name="msku2" value="D10012">
     <tr>
       <td width="50" align="center"><input type="checkbox" name="mqty2" value="1"></td>
      <td width="250">Here Today Gone Tomorrow</td>
       <td width="75">&nbsp;</td>
      <input type="hidden" name="msku3" value="D10013">
       <td width="50" align="center"><input type="checkbox" name="mqty3" value="1"></td>
      <td width="250">Fight or Flight Part 2</td>
     </tr>
 </table>
<input type="submit" name="multiadd" value="Add Whole Page">
 </form>
IShivaAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
peh803Connect With a Mentor Commented:
dang, good call.  The parenthesis would mess it up.  Didn't catch that.  So, my above post would become:

<script Language="JavaScript">
<!--
function checkbox_checker()
{
             
// set var checkbox_choices to zero
             
var checkbox_choices = 0;
             
// Loop from zero to the one minus the number of checkbox button selections
for (counter = 0; counter < checkbox_form.length; counter++)
{
             
// If a checkbox has been selected it will return true
// (If not it will return false)
//alert(counter+': '+checkbox_form.elements[counter].value);
if (checkbox_form.elements[counter].value==1)
{ checkbox_choices = checkbox_choices + 1; }
             
}
             
if (checkbox_choices < 3 )
{
// If there were less then selections made display an alert box
alert("Please make three selections. \n" + checkbox_choices + " entered so far.")
return false;
}
             
// If three were selected then go to shopping cart
return true;
}

function changeIt(cboxObj){
 if (cboxObj.value==0){
   cboxObj.value=1;
 }
 else
 {
   cboxObj.value=0;
 }
}
-->
</script>

<!--FORM-->
<form method="post" onsubmit="return checkbox_checker()" name="checkbox_form">
<table border="0" width="600">
    <tr>
    <td align="center"><b>Add</b></td>
   <td width="250"><b>Article Title</b></td>
    <td width="75">&nbsp;</td>
   <td align="center"><b>Add</b></td>
   <td width="250"><b>Article Title</b></td>
   </tr>
                             
    <input type="hidden" name="msku0" value="D10010">
   <tr>
   <td width="50" align="center"><input type="checkbox" name="mqty0" value="0" onclick="changeIt(this);"></td>
    <td width="250">When Should I Start The Succession Plan?</td>
   <td width="75">&nbsp;</td>
   <input type="hidden" name="msku1" value="D10011">
    <td width="50" align="center"><input type="checkbox" name="mqty1" value="0" onclick="changeIt(this);"></td>
    <td width="250">Getting The New Generation Ready</td>
   </tr>
                             
    <input type="hidden" name="msku2" value="D10012">
   <tr>
    <td width="50" align="center"><input type="checkbox" name="mqty2" value="0" onclick="changeIt(this);"></td>
   <td width="250">Here Today Gone Tomorrow</td>
    <td width="75">&nbsp;</td>
   <input type="hidden" name="msku3" value="D10013">
    <td width="50" align="center"><input type="checkbox" name="mqty3" value="0" onclick="changeIt(this);"></td>
   <td width="250">Fight or Flight Part 2</td>
   </tr>
</table>
<input type="submit" name="multiadd" value="Add Whole Page">
</form>

peh803
0
 
BustaroomsCommented:
change your for loop to the following:

for (counter = 0; counter < checkbox_form.length; counter++){
   if(checkbox_form.elements[i].type == "checkbox"){
             if (checkbox_form.elements[i].checked)
                  checkbox_choices++;
    }
}
0
 
mreuringCommented:
This oughta do the trick:
function checkbox_checker()
{
               
// set var checkbox_choices to zero
               
var checkbox_choices = 0;
               
// Loop from zero to the one minus the number of checkbox button selections
for (counter = 0; counter < checkbox_form.elements.length; counter++)
{
               
// If a checkbox has been selected it will return true
// (If not it will return false)
if (checkbox_form.elements[counter].type="checkbox" && checkbox_form.elements[counter].checked)
{ checkbox_choices = checkbox_choices + 1; }
               
}
               
if (checkbox_choices < 4 )
{
// If there were less then selections made display an alert box
alert("Please make three selections. \n" + checkbox_choices + " entered so far.")
return (false);
}
               
// If three were selected then go to shopping cart
return (true);
}

Good luck,
 Martin
0
Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

 
peh803Commented:
IShiva,

I have tested this code, and it works perfectly for what you want to do:

<script Language="JavaScript">
<!--
function checkbox_checker()
{
             
// set var checkbox_choices to zero
             
var checkbox_choices = 0;
             
// Loop from zero to the one minus the number of checkbox button selections
for (counter = 0; counter < checkbox_form.length; counter++)
{
             
// If a checkbox has been selected it will return true
// (If not it will return false)
//alert(counter+': '+checkbox_form.elements[counter].value);
if (checkbox_form.elements[counter].value==1)
{ checkbox_choices = checkbox_choices + 1; }
             
}
             
if (checkbox_choices < 3 )
{
// If there were less then selections made display an alert box
alert("Please make three selections. \n" + checkbox_choices + " entered so far.")
return (false);
}
             
// If three were selected then go to shopping cart
return (true);
}
function changeIt(cboxObj){
  if (cboxObj.value==0){
    cboxObj.value=1;
  }
  else
  {
    cboxObj.value=0;
  }
}
-->
</script>

<!--FORM-->
<form method="post" onsubmit="return checkbox_checker()" name="checkbox_form">
<table border="0" width="600">
     <tr>
     <td align="center"><b>Add</b></td>
    <td width="250"><b>Article Title</b></td>
     <td width="75">&nbsp;</td>
    <td align="center"><b>Add</b></td>
    <td width="250"><b>Article Title</b></td>
    </tr>
                             
     <input type="hidden" name="msku0" value="D10010">
    <tr>
    <td width="50" align="center"><input type="checkbox" name="mqty0" value="0" onclick="changeIt(this);"></td>
     <td width="250">When Should I Start The Succession Plan?</td>
    <td width="75">&nbsp;</td>
    <input type="hidden" name="msku1" value="D10011">
     <td width="50" align="center"><input type="checkbox" name="mqty1" value="0" onclick="changeIt(this);"></td>
     <td width="250">Getting The New Generation Ready</td>
    </tr>
                             
     <input type="hidden" name="msku2" value="D10012">
    <tr>
     <td width="50" align="center"><input type="checkbox" name="mqty2" value="0" onclick="changeIt(this);"></td>
    <td width="250">Here Today Gone Tomorrow</td>
     <td width="75">&nbsp;</td>
    <input type="hidden" name="msku3" value="D10013">
     <td width="50" align="center"><input type="checkbox" name="mqty3" value="0" onclick="changeIt(this);"></td>
    <td width="250">Fight or Flight Part 2</td>
    </tr>
</table>
<input type="submit" name="multiadd" value="Add Whole Page">
</form>

Let me know if you have any questions!!

regards,
peh803
0
 
peh803Commented:
one thing to note:

I changed this code:

   if (checkbox_choices < 4 )
   {
   // If there were less then selections made display an alert box
   alert("Please make three selections. \n" + checkbox_choices + " entered so far.")
   return (false);
   }

To this code:

   if (checkbox_choices < 3 )
   {
   // If there were less then selections made display an alert box
   alert("Please make three selections. \n" + checkbox_choices + " entered so far.")
   return (false);
   }

It appeared that your check was inconsistent with your message (select at least three, but your logic was requiring 4).

Obviously, you can modify this to suit your needs.
0
 
IShivaAuthor Commented:
thanks guys, but it doesnt seem to work. Ive implemented the code changes above and upon clicking submit, (regardles of what i have checked) it goes to my shopping cart . (with the correct selections placed in the cart) but no error message stating you must select at least 4. the problem lies in the name attribute for the input tag. (i think, but im not javascript smart). any other suggestions?
0
 
BustaroomsConnect With a Mentor Commented:
get rid of the parenthesis around "false" and "true"

return (false)   becomes  return false;
0
 
IShivaAuthor Commented:
peh803,

I think your code works....sorry about the previous post but i was unaware of the additions to the code. you said it works for what i want it to do, but didnt realize that you added some things...i gave it a shot and i think it works...i will test is for a couple of mins and post back.
0
 
peh803Commented:
Yeah, I added a few things here and there.  You should be able to just copy / paste the code and it should work as you want it to.  Please let me know if you have any questions or comments about the structure of the code, things I've added, etc.  

Thanks,
peh803
0
 
IShivaAuthor Commented:
peh803,

what does the change it function do? looks foreign to me. lol
0
 
BustaroomsCommented:
IShiva, i'd recommend you try my suggestion and fix the return's
0
 
IShivaAuthor Commented:
one more question that you may know while im testing my code out,

can we add this functionality to the JS.

the user must select multiples of 4? eg. a user must purchase at least 4 articles, but not 5. the total must be 4 or 8 or 12 etc?

is this possible?

almost done testing the code. thanks again
0
 
IShivaAuthor Commented:
bustarooms,

ok ill change it and see
0
 
peh803Commented:
the changeit function just swaps the value of each checkbox to 1 if the value is 0, and to 0 if the value is 1.  It shouldn't look familiar to you..I just wrote it for your purposes.  :-)

at any rate, you should just be able to copy / paste my latest code (with parenthesises removed, thanks to bustarooms's good catch) and use that.  

0
 
BustaroomsCommented:
full code with your multiple of 4 request

<script Language="JavaScript">
<!--
function checkbox_checker(){
// set var checkbox_choices to zero
       
var checkbox_choices = 0;
               
// Loop from zero to the one minus the number of checkbox button selections
for (counter = 0; counter < checkbox_form.length; counter++){
   if(checkbox_form.elements[i].type == "checkbox"){
             if (checkbox_form.elements[i].checked)
                  checkbox_choices++;
    }
}
               
if (checkbox_choices/4 != 0){
// not a multiple of 4
alert("Please select 4 or more, in multiples of 4. \n" + checkbox_choices + " entered so far.")
return false;
}
               
// If three were selected then go to shopping cart
return true;
}
               
-->
</script>
0
 
peh803Commented:
this may be a stupid question (I haven't tested this), but....

isn't 9/4=2.25?  

Thus, won't 9/4 != 0 return false and throw the user into a false positive in the following statement?

if (checkbox_choices/4 != 0){
// not a multiple of 4
alert("Please select 4 or more, in multiples of 4. \n" + checkbox_choices + " entered so far.")
return false;
}
 
// If three were selected then go to shopping cart
return true;
}
0
 
BustaroomsCommented:
yeah, should have been module

if (checkbox_choices%4 != 0){
0
 
peh803Commented:
I thought that looked fishy...

Anyways, good call.
0
 
IShivaAuthor Commented:
the multiple of 4 code did not work. after selecting 1 item, it took me to my cart page with no item added.

but the other code works. the user must select at least x items and it if x is selected, it adds the items into the cart.

if you have time and want to worry about it, it would be great to make users select multiples of 4.

thanks for your help peh803 and bustarooms..... i appreciate it greatly!!!!
0
 
BustaroomsCommented:
yeah, sorry about that, peh pointed out the problem with the multiple code.  here is a working version

<script Language="JavaScript">
<!--
function checkbox_checker(){
// set var checkbox_choices to zero
       
var checkbox_choices = 0;
               
// Loop from zero to the one minus the number of checkbox button selections
for (counter = 0; counter < checkbox_form.length; counter++){
   if(checkbox_form.elements[i].type == "checkbox"){
             if (checkbox_form.elements[i].checked)
                  checkbox_choices++;
    }
}
               
if (checkbox_choices%4 != 0){
// not a multiple of 4
alert("Please select 4 or more, in multiples of 4. \n" + checkbox_choices + " entered so far.")
return false;
}
               
// If three were selected then go to shopping cart
return true;
}
               
-->
</script>
0
 
IShivaAuthor Commented:
bustarooms,

still didnt work, do i need the changeit function in the code maybe?
0
 
BustaroomsCommented:
post your full code
0
 
IShivaAuthor Commented:
<script Language="JavaScript">
<!--
function checkbox_checker()
{
             
// set var checkbox_choices to zero
             
var checkbox_choices = 0;
             
// Loop from zero to the one minus the number of checkbox button selections
for (counter = 0; counter < checkbox_form.length; counter++)
{
             
// If a checkbox has been selected it will return true
// (If not it will return false)
//alert(counter+': '+checkbox_form.elements[counter].value);
if (checkbox_form.elements[counter].value==1)
{ checkbox_choices = checkbox_choices + 1; }
             
}
             
if (checkbox_choices < 3 )
{
// If there were less then selections made display an alert box
alert("Please make three selections. \n" + checkbox_choices + " entered so far.")
return false;
}
             
// If three were selected then go to shopping cart
return true;
}
function changeIt(cboxObj){
  if (cboxObj.value==0){
    cboxObj.value=1;
  }
  else
  {
    cboxObj.value=0;
  }
}
-->
</script>

FORM
<form method="post" action="http://(url to shopping cart)" onsubmit="return checkbox_checker()" name="checkbox_form">
<table border="0" width="600">
     <tr>
     <td align="center"><b>Add</b></td>
    <td width="250"><b>Article Title</b></td>
     <td width="75">&nbsp;</td>
    <td align="center"><b>Add</b></td>
    <td width="250"><b>Article Title</b></td>
    </tr>
                             
     <input type="hidden" name="msku0" value="D10010">
    <tr>
    <td width="50" align="center"><input type="checkbox" name="mqty0" value="0" onclick="changeIt(this);"></td>
     <td width="250">When Should I Start The Succession Plan?</td>
    <td width="75">&nbsp;</td>
    <input type="hidden" name="msku1" value="D10011">
     <td width="50" align="center"><input type="checkbox" name="mqty1" value="0" onclick="changeIt(this);"></td>
     <td width="250">Getting The New Generation Ready</td>
    </tr>
                             
     <input type="hidden" name="msku2" value="D10012">
    <tr>
     <td width="50" align="center"><input type="checkbox" name="mqty2" value="0" onclick="changeIt(this);"></td>
    <td width="250">Here Today Gone Tomorrow</td>
     <td width="75">&nbsp;</td>
    <input type="hidden" name="msku3" value="D10013">
     <td width="50" align="center"><input type="checkbox" name="mqty3" value="0" onclick="changeIt(this);"></td>
    <td width="250">Fight or Flight Part 2</td>
    </tr>
</table>
<input type="submit" name="multiadd" value="Add Whole Page">
</form>
0
 
BustaroomsCommented:
are you sure that's what you are testing?  looks like your not using any of my code
0
 
peh803Commented:
hah, yeah....

Instead of this:
//--------------
if (checkbox_choices < 3 )
{
// If there were less then selections made display an alert box
alert("Please make three selections. \n" + checkbox_choices + " entered so far.")
return false;
}
             
// If three were selected then go to shopping cart
return true;
}
//--------------


do this:
//--------------
if (checkbox_choices%4 != 0){
// not a multiple of 4
alert("Please select 4 or more, in multiples of 4. \n" + checkbox_choices + " entered so far.")
return false;
}
               
// If three were selected then go to shopping cart
return true;
}
//--------------

peh803
0
 
IShivaAuthor Commented:
the above is what works. do i need to simply add your code to it? or should it work by itself? i tried your code but it didnt work..i copied and pasted from your previous post. any ideas?
0
 
IShivaAuthor Commented:
OK, i added the above to my existing code that works...and it works GREAT!!! I appreciate all your help. cant tell you how greatful i am.

thanks again!

IShiva
0
 
peh803Commented:
no problem...look us up if you need help with stuff in the future, too.

regards,
peh803
0
 
IShivaAuthor Commented:
absolutely i will...

thanks again!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.