Solved

Javascript Checkbox Validation with <form>

Posted on 2004-08-18
29
1,674 Views
Last Modified: 2008-01-09
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>
0
Comment
Question by:IShiva
  • 11
  • 9
  • 8
  • +1
29 Comments
 
LVL 10

Expert Comment

by:Bustarooms
ID: 11830468
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
 
LVL 17

Expert Comment

by:mreuring
ID: 11830472
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
 
LVL 19

Expert Comment

by:peh803
ID: 11830504
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
 
LVL 19

Expert Comment

by:peh803
ID: 11830522
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
 

Author Comment

by:IShiva
ID: 11830577
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
 
LVL 10

Assisted Solution

by:Bustarooms
Bustarooms earned 100 total points
ID: 11830619
get rid of the parenthesis around "false" and "true"

return (false)   becomes  return false;
0
 

Author Comment

by:IShiva
ID: 11830647
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
 
LVL 19

Accepted Solution

by:
peh803 earned 400 total points
ID: 11830665
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
 
LVL 19

Expert Comment

by:peh803
ID: 11830682
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
 

Author Comment

by:IShiva
ID: 11830723
peh803,

what does the change it function do? looks foreign to me. lol
0
 
LVL 10

Expert Comment

by:Bustarooms
ID: 11830742
IShiva, i'd recommend you try my suggestion and fix the return's
0
 

Author Comment

by:IShiva
ID: 11830750
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
 

Author Comment

by:IShiva
ID: 11830762
bustarooms,

ok ill change it and see
0
 
LVL 19

Expert Comment

by:peh803
ID: 11830788
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
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 
LVL 10

Expert Comment

by:Bustarooms
ID: 11830791
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
 
LVL 19

Expert Comment

by:peh803
ID: 11830873
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
 
LVL 10

Expert Comment

by:Bustarooms
ID: 11830895
yeah, should have been module

if (checkbox_choices%4 != 0){
0
 
LVL 19

Expert Comment

by:peh803
ID: 11830934
I thought that looked fishy...

Anyways, good call.
0
 

Author Comment

by:IShiva
ID: 11830974
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
 
LVL 10

Expert Comment

by:Bustarooms
ID: 11830997
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
 

Author Comment

by:IShiva
ID: 11831065
bustarooms,

still didnt work, do i need the changeit function in the code maybe?
0
 
LVL 10

Expert Comment

by:Bustarooms
ID: 11831159
post your full code
0
 

Author Comment

by:IShiva
ID: 11831191
<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
 
LVL 10

Expert Comment

by:Bustarooms
ID: 11831223
are you sure that's what you are testing?  looks like your not using any of my code
0
 
LVL 19

Expert Comment

by:peh803
ID: 11831252
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
 

Author Comment

by:IShiva
ID: 11831268
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
 

Author Comment

by:IShiva
ID: 11831342
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
 
LVL 19

Expert Comment

by:peh803
ID: 11831508
no problem...look us up if you need help with stuff in the future, too.

regards,
peh803
0
 

Author Comment

by:IShiva
ID: 11831540
absolutely i will...

thanks again!
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now