Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Feb 2006
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Validating checkboxes by value

    I found some simple code to get a better understanding of validating checkboxes. It validates the checkboxs by their name. Is it possible to validate the checkboxes with the same name but different values? The name of the checkboxes will be an array containing the values of the checkboxes selected.
    I have my html like so:
    Code:
    <input type="checkbox" name="stuff[]" value="1" onClick="countChoices(this)">
    <input type="checkbox" name="stuff[]" value="2" onClick="countChoices(this)">
    <input type="checkbox" name="stuff[]" value="3" onClick="countChoices(this)">
    And the javascript where I edited "box1=", "box2=", "box3=" is like so:
    Code:
    function countChoices(obj) {
    max = 2;
    
    box1 = obj.form.1.checked;
    box2 = obj.form.2.checked;
    box3 = obj.form.3.checked;
    
    count = (box1 ? 1 : 0) + (box2 ? 1 : 0) + (box3 ? 1 : 0);
    
    if (count > max) {
    alert("You can only choose up to " + max + " choices! \nUncheck an option if you want to pick another.");
    obj.checked = false;
       }
    }
    How do I correctly create box1, box2, box3, in this case?
    Last edited by geewhiz; 05-03-2006 at 07:31 PM.

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,503
    Thanks
    3
    Thanked 500 Times in 487 Posts
    names with characters [ or ] cannot be checked using std methods

    so use document.getElementsByName(obj.name);

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    <!--
    
    function countChoices(obj,max){
     var cbs=document.getElementsByName(obj.name);
     var cnt=[];
     for (var zxc0=0;zxc0<cbs.length;zxc0++){
      if (cbs[zxc0].checked){ cnt.push(cbs[zxc0]); }
     }
     if (cnt.length>max){
      alert('Too Many');
      obj.checked=false;
      return false;
     }
     return true;
    }
    
    
    //-->
    </script></head>
    
    <body>
    <input type="checkbox" name="stuff[]" value="1" onClick="countChoices(this,2)">
    <input type="checkbox" name="stuff[]" value="2" onClick="countChoices(this,2)">
    <input type="checkbox" name="stuff[]" value="3" onClick="countChoices(this,2)">
    
    
    
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    New Coder
    Join Date
    Feb 2006
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Its beautiful! I've been playing with my code for hours and only errors. Time to disect this and see how it is working. Thanks much!

  • #4
    New Coder
    Join Date
    Feb 2006
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well lets say that some of the values stored in "stuff[]" are for different questions. Like so:
    Code:
    <body>
    <input type="checkbox" name="stuff[]" value="1" onClick="countChoices1(this,2)"/>
    <input type="checkbox" name="stuff[]" value="2" onClick="countChoices1(this,2)"/>
    <input type="checkbox" name="stuff[]" value="3" onClick="countChoices1(this,2)"/>
    
    <input type="checkbox" name="stuff[]" value="4" onClick="countChoices2(this,3)"/>
    <input type="checkbox" name="stuff[]" value="5" onClick="countChoices2(this,3)"/>
    <input type="checkbox" name="stuff[]" value="6" onClick="countChoices2(this,3)"/>
    <input type="checkbox" name="stuff[]" value="7" onClick="countChoices2(this,3)"/>
    </body>
    If the values=4-7 are for a different question, I created another javascript instance, countChoices2, for sending a different max. The new max is being sent correctly but it is still holding the values from "countChoice1" because I am allow to pick 2 checkboxes from the first question and only 1 addition from the second question.

    I set function countChoices2 like this to try to clear any previous instances:

    Code:
    <script language="JavaScript" type="text/javascript">
    <!--
    function countChoices2(obj,max){
     var cbs=0;
     var cbs=document.getElementsByName(obj.name);
     var cnt=0;
     var cnt=[];
     for (var zxc0=0;zxc0<cbs.length;zxc0++){
      if (cbs[zxc0].checked){ cnt.push(cbs[zxc0]); }
     }
     if (cnt.length>max){
      alert('Only 3');
      obj.checked=false;
      return false;
     }
     return true;
    }
    //-->
    </script>

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,503
    Thanks
    3
    Thanked 500 Times in 487 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    <!--
    function countChoices(zxcobj,max,grp){
     if (!window[grp]){ window[grp]=[]; }
     if (!zxcobj.set){ zxcobj.set=true; window[grp].push(zxcobj); }
     var cnt=[];
     for (var zxc0=0;zxc0<window[grp].length;zxc0++){
      if (window[grp][zxc0].checked){ cnt.push(window[grp][zxc0]); }
     }
     if (cnt.length>max){
      alert('Too Many in Group '+grp);
      zxcobj.checked=false;
      return false;
     }
     return true;
    }
    
    
    //-->
    </script>
    </head>
    
    <body>
    <body>
    <input type="checkbox" name="stuff[]" value="1" onClick="countChoices(this,2,'grp1')"/>
    <input type="checkbox" name="stuff[]" value="2" onClick="countChoices(this,2,'grp1')"/>
    <input type="checkbox" name="stuff[]" value="3" onClick="countChoices(this,2,'grp1')"/>
    <br>
    <input type="checkbox" name="stuff[]" value="4" onClick="countChoices(this,3,'grp2')"/>
    <input type="checkbox" name="stuff[]" value="5" onClick="countChoices(this,3,'grp2')"/>
    <input type="checkbox" name="stuff[]" value="6" onClick="countChoices(this,3,'grp2')"/>
    <input type="checkbox" name="stuff[]" value="7" onClick="countChoices(this,3,'grp2')"/>
    </body>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #6
    New Coder
    Join Date
    Feb 2006
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Interesting code. Very helpful. Thanks much!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •