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 13 of 13
  1. #1
    Regular Coder
    Join Date
    Oct 2009
    Posts
    438
    Thanks
    9
    Thanked 7 Times in 7 Posts

    Only allow 25 checkboxes

    All,
    I have the following code which validates a form has at least one checkbox checked before it submits it. However I want to make sure that there aren't more then 25 checked on the page. How can I do this?
    Code:
    function validate(field)
    {
    for (var i = 0; i < field.length; i++){
        if(field[i].checked){ // if a field is checked form is submitted
            return true;
            }
        }
    alert("You need to have a check box selected to submit the form!");
    return false; // if no fields are checked form not submitted
    }
    Thanks in advance!

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,083
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    Quote Originally Posted by treeleaf20 View Post
    All,
    I have the following code which validates a form has at least one checkbox checked before it submits it. However I want to make sure that there aren't more then 25 checked on the page. How can I do this?
    Code:
    function validate(field)
    {
    for (var i = 0; i < field.length; i++){
        if(field[i].checked){ // if a field is checked form is submitted
            return true;
            }
        }
    alert("You need to have a check box selected to submit the form!");
    return false; // if no fields are checked form not submitted
    }
    Thanks in advance!
    Try this change:
    Code:
    function validate(field) {
      var cbCnt = 0;
      for (var i = 0; i < field.length; i++){
        if(field[i].checked){ cbCnt++; } // count # increases if a field is checked
      }
      if (cbCnt < 1) {
       alert("You need to have a check box selected to submit the form!");
        return false; // if no fields are checked form not submitted
      }
      if (cbCnt > 25) {
       alert("You have TOO MANY check boxes selected to submit the form!");
        return false; // if to many fields are checked form not submitted
      }
      return true;  // passes validation of checkbox count
    }

  • #3
    New Coder
    Join Date
    Nov 2009
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi, i am using what is above to help me on this as i need the same thing doing, however could you give me an example of the form please.

    I have come up with so fare:

    Code:
    <form name="input">
    <input type="checkbox" name="cbCnt" value="i">
    </form>
    is this right?

    I am wanting to know were to put cbCnt and were to put i.

    And surely you would use if....else if.....else

    i.e:
    Code:
    function validate(field) {
      var cbCnt = 0;
      for (var i = 0; i < field.length; i++){
        if(field[i].checked){ cbCnt++; } // count # increases if a field is checked
      }
      if (cbCnt < 1) {
       alert("You need to have a check box selected to submit the form!");
        return false; // if no fields are checked form not submitted
      }
      else if (cbCnt > 25) {
       alert("You have TOO MANY check boxes selected to submit the form!");
        return false; // if to many fields are checked form not submitted
      }
     else {
      return true;  // passes validation of checkbox count
      }
    }
    Last edited by strawcakes; 12-15-2009 at 11:00 PM.

  • #4
    Regular Coder
    Join Date
    Jan 2006
    Posts
    568
    Thanks
    6
    Thanked 84 Times in 84 Posts
    I am wanting to know were to put cbCnt and were to put i.
    Nowhere - only the JS function uses these.

    It gets access to the form via the field argument - a set of HTML elements passed to it when it is called.

    It then goes through each one, checking whether it is checked, and if so, incrementing cbCnt. i is simply a counter to keep track of which element is currently being checked.

    And surely you would use if....else if.....else
    1. the two 'if' conditions being checked are mutually exclusive, so the first 'else' is redundant

    2. return statements in each 'if' block make sure the last 'else' never gets executed unless the other two conditions aren't met, so it too is redundant

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,438
    Thanks
    75
    Thanked 4,372 Times in 4,337 Posts
    I think strawcakes was trying to figure out what the <form> and checboxes look like.

    Example:
    Code:
    <form name="doesNotMatter" onsubmit="return validate(this.zambonis);">
    ...
    <input type="checkbox" name="zambonis" value="icicles" />
    <input type="checkbox" name="zambonis" value="cold" />
    <input type="checkbox" name="zambonis" value="hockey" />
    <input type="checkbox" name="zambonis" value="snoopy" />
    ... for as many checkboxes of same name as you want...
    <input type="checkbox" name="zambonis" value="zoom" />
    ...
    </form>
    So you only have to (a) name the checkboxes the same and (b) pass the entire set of them, by name reference, when you invoke the function.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    Regular Coder
    Join Date
    Oct 2009
    Posts
    438
    Thanks
    9
    Thanked 7 Times in 7 Posts
    My JS looks like this:
    Code:
    function validate(field) {
     var cbCnt = 0;
     for (var i = 0; i < field.length; i++){
       if(field[i].checked){ cbCnt++; } // count # increases if a field is checked
     }
     if (cbCnt < 1) {
      alert("You need to have a picture selected to submit the form!");
       return false; // if no fields are checked form not submitted
     }
     if (cbCnt > 20) {
      alert("You can only add 20 pictures at a time!");
       return false; // if to many fields are checked form not submitted
     }
     return true;  // passes validation of checkbox count
    }
    The form with the checkboxes is in a PHP foreach and looks like this:
    PHP Code:
    echo "<input name=\"picbigid[]\" type=\"checkbox\" value=\"$pic[src_big]\">"

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,438
    Thanks
    75
    Thanked 4,372 Times in 4,337 Posts
    Yeah, but the important thing, then, is the way you invoke the function.

    Presumably, something like:
    Code:
    <form name="Whatever" onsubmit="return validate(this.elements['picbigid[]']);">
    ...
    Note that only PHP requires the silly [] on the end of the name of multiple checkboxes. If you are using JSP or ASP or CF, you'd leave off the [] and then you could just do
    Code:
    <form name="Whatever" onsubmit="return validate(this.picbigid);">
    ...
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    New Coder
    Join Date
    Nov 2009
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts
    thanks everyone for there help. however no-one has posted the JS part linked with the form in the body. i am currently struggling how to connect the two. if someone could post this it would be appreciated!

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,438
    Thanks
    75
    Thanked 4,372 Times in 4,337 Posts
    Yes, I did. In post #5. I quote myself:
    Code:
    <form name="doesNotMatter" onsubmit="return validate(this.zambonis);">
    ...
    <input type="checkbox" name="zambonis" value="icicles" />
    <input type="checkbox" name="zambonis" value="cold" />
    <input type="checkbox" name="zambonis" value="hockey" />
    <input type="checkbox" name="zambonis" value="snoopy" />
    ... for as many checkboxes of same name as you want...
    <input type="checkbox" name="zambonis" value="zoom" />
    ...
    </form>
    When the form is submitted (presumbably by way of an <input type=submit> or <input type=image> button) then the onsubmit handler of the <form> is automatically called. And if you put a js function call in there (with return! as shown!) then it works.

    Did you not try that?

    Or did I misunderstand your problem?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #10
    New Coder
    Join Date
    Nov 2009
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts
    right so what do i out in the js function?

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,438
    Thanks
    75
    Thanked 4,372 Times in 4,337 Posts
    The code that *you* posted in post #3 should work.

    But if you want something different than "you must check between 1 and 25 checkboxes" then you need to tell us so. So far, you haven't told us any differently.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #12
    New Coder
    Join Date
    Nov 2009
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts
    sorry please ignore this

  • #13
    New Coder
    Join Date
    Dec 2009
    Posts
    19
    Thanks
    2
    Thanked 1 Time in 1 Post
    Hi,
    newbie here.. =)
    i think strawcakes asking how to write a complete code here..
    if not mistaken it should be..
    Code:
    <html>
    
    <head>
    
    function validate(field) {
      var cbCnt = 0;
      for (var i = 0; i < field.length; i++){
        if(field[i].checked){ cbCnt++; } // count # increases if a field is checked
      }
      if (cbCnt < 1) {
       alert("You need to have a check box selected to submit the form!");
        return false; // if no fields are checked form not submitted
      }
      if (cbCnt > 25) {
       alert("You have TOO MANY check boxes selected to submit the form!");
        return false; // if to many fields are checked form not submitted
      }
      return true;  // passes validation of checkbox count
    }
    
    </head>
    <body>
    
    <form name="doesNotMatter" onsubmit="return validate(this.zambonis);">
    ...
    <input type="checkbox" id="zambonis" value="icicles" />
    <input type="checkbox" id="zambonis" value="cold" />
    <input type="checkbox" id="zambonis" value="hockey" />
    <input type="checkbox" id="zambonis" value="snoopy" />
    <input type="checkbox" id="zambonis" value="zoom" />
    ...
    
    <input type = "button" id="subBtn" onclick = "validate('zambonis')"  />
    </form>
    </body>
    </html>
    i not sure whether it contain of syntax error or not..but i hope it answer you question.. =)
    Please do correct me if im wrong..
    thanks..


  •  

    Posting Permissions

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