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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 20
  1. #1
    Regular Coder
    Join Date
    Nov 2005
    Posts
    225
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Checkbox form validation - how to make a user select 4 check boxes?

    Hello,

    I am sorry to keep asking questions. I am newbie in JS.

    I have a question of a few checkboxes and how do I require a user to check 2 checkboxes (no more, no less)?

    Here is my form:
    <input type="checkbox" name="color" id="q" value="a" />A<BR />
    <input type="checkbox" name="color" id="q2" value="b" />b<BR />
    <input type="checkbox" name="color" id="q3" value="c" />c<BR />
    <input type="checkbox" name="color" id="q4" value="d" />d<BR />

    Thanks much.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    function checkBoxes() {
    var len = document.formname.color.length // 4 in this case
    var count = 0;
    for (var i=0; i<len; i++) {
    if (color[i].checked) {
    count ++;
    }
    }
    if (count !=2) { ..................
    }
    Last edited by Philip M; 05-11-2007 at 05:39 PM.

  • #3
    New Coder
    Join Date
    Aug 2005
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Possible solution

    <html>
    <head>
    <title></title>
    <script language="javascript">
    function count(){
    c=document.getElementById('count');
    if(!this.checked) c.innerHTML=parseInt(c.innerHTML)+1; //if we're unchecking the box increase the value of count by 1
    else if(c.innerHTML>0) c.innerHTML=parseInt(c.innerHTML)-1; //if we're checking the box and count > 0 then decrease count by 1
    else return false; //otherwise if the box is checked and count = 0 then don't let another box get checked
    }

    function clickd(){
    const numboxes = document.skittles.color.length;
    for(j=1;j<=numboxes;j++)
    document.getElementById('q'+j).onclick=count; //create an onclick event for the checkboxes
    }
    </script>
    </head>

    <body>
    <p>Please check off <span id="count">2</span> boxes </p> <!--Added this line to let users know how many to check off-->
    <form name="skittles">
    <input type="checkbox" name="color" id="q1" value="a" />A<BR /> <!--changed id from "q" to "q1"-->
    <input type="checkbox" name="color" id="q2" value="b" />b<BR />
    <input type="checkbox" name="color" id="q3" value="c" />c<BR />
    <input type="checkbox" name="color" id="q4" value="d" />d<BR />
    </form>
    <script>clickd()</script> <!--Added this to add onclick event to all the checkboxes-->
    </body>
    </html>
    A quick solution, but it indicates to the user how many to check.
    Last edited by dasickis; 05-11-2007 at 06:29 PM. Reason: Making it a little better

  • #4
    Regular Coder
    Join Date
    Nov 2005
    Posts
    225
    Thanks
    2
    Thanked 0 Times in 0 Posts
    When I added this, onClick="clickd()" to all <input> check boxes, nothing happen when I click Submit button.
    can you help please?
    thanks.

  • #5
    New Coder
    Join Date
    Aug 2005
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You can't do that, clickd() is to add the onclick event to all the checkboxes and it won't work if you do onClick="count()" because then the "this" keyword applies itself to the window. You have to use the clickd function the way it is.

    Resource for why this is: http://www.quirksmode.org/js/this.html

  • #6
    New Coder
    Join Date
    Aug 2005
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Can you point me to the page that you're developing, if its on localhost can you send me it or something so I can see it. If you can't show me the full source then can you paste the form in question at least.

  • #7
    Regular Coder
    Join Date
    Nov 2005
    Posts
    225
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I ran on localhost.
    here is my code:
    Other functions works fine.

    <html>
    <head>
    <title></title>
    <script language="javascript">
    <!--
    var maxC=255;
    function limC(obj){
    while(obj.value.length>maxC){
    obj.value=obj.value.replace(/.$/,'');
    }
    }

    function count(){
    c=document.getElementById('count');
    if(!this.checked) c.innerHTML=parseInt(c.innerHTML)+1; //if we're unchecking the box increase the value of count by 1
    else if(c.innerHTML>0) c.innerHTML=parseInt(c.innerHTML)-1; //if we're checking the box and count > 0 then decrease count by 1
    else return false; //otherwise if the box is checked and count = 0 then don't let another box get checked
    }

    function clickd(){
    const numboxes = document.skittles.color.length;
    for(j=1;j<=numboxes;j++)
    document.getElementById('q'+j).onclick=count; //create an onclick event for the checkboxes
    }

    function chFrm() {
    var msgbox = "You forgot the following question\n";
    var goon = msgbox

    if (document.frmName.selectname.value==0) {
    msgbox = msgbox + "\n Please select one name";
    }

    // If no errors found, then go ahead to submit the form
    if (msgbox == goon) {
    return true;
    } else {

    alert(msgbox);
    return false;
    }
    }
    // End -->
    </script>
    </head>

    <body>
    <p>Please check off <span id="count">2</span> boxes </p> <!--Added this line to let users know how many to check off-->
    <form name="skittles">
    <input type="checkbox" name="color" onClick="clickd()" id="q1" value="a" />A<BR /> <!--changed id from "q" to "q1"-->
    <input type="checkbox" name="color" onClick="clickd()" id="q2" value="b" />b<BR />
    <input type="checkbox" name="color" onClick="clickd()" id="q3" value="c" />c<BR />
    <input type="checkbox" name="color" onClick="clickd()" id="q4" value="d" />d<BR />
    </form>

    </body>
    </html>

  • #8
    New Coder
    Join Date
    Aug 2005
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I put what I have on the date format page

  • #9
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    This will disable the other 2 checkboxes if there are already 2 checkboxes checked.
    Code:
    function clickCtr(chk){
      var ctr = 0;
      var chks = chk.form.elements[chk.name];
      for (var i=0; i<chks.length; i++){
         if (chks[i].checked) ctr++;
      }
      if (ctr==2){
        for (i=0; i<chks.length; i++){ //disable remaining unchecked checkboxes
          if (!chks[i].checked) chks[i].disabled=true;
        }
      }
      else{ //enable all
        for (i=0; i<chks.length; i++){
          chks[i].disabled=false;
        }
      }
    }
    Code:
    <form name="skittles">
    <input type="checkbox" name="color" onClick="clickCtr(this)" id="q1" value="a" />A<BR />
    <input type="checkbox" name="color" onClick="clickCtr(this)" id="q2" value="b" />b<BR />
    <input type="checkbox" name="color" onClick="clickCtr(this)" id="q3" value="c" />c<BR />
    <input type="checkbox" name="color" onClick="clickCtr(this)" id="q4" value="d" />d<BR />
    </form>
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #10
    Regular Coder
    Join Date
    Nov 2005
    Posts
    225
    Thanks
    2
    Thanked 0 Times in 0 Posts
    That's it.
    it worked to stop at 2.
    But is there any way to make a user to check at least 2 but not more than 2???
    Thanks.
    Last edited by jennypretty; 05-11-2007 at 09:01 PM.

  • #11
    New Coder
    Join Date
    Aug 2005
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That's really well designed

  • #12
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Code:
    function clickCtr(chk){
      var ctr = 0;
      var chks = chk.form.elements[chk.name];
      for (var i=0; i<chks.length; i++){
         if (chks[i].checked) ctr++;
      }
      if (ctr==2){
        for (i=0; i<chks.length; i++){ //disable remaining unchecked checkboxes
          if (!chks[i].checked) chks[i].disabled=true;
        }
      }
      else{ //enable all
        for (i=0; i<chks.length; i++){
          chks[i].disabled=false;
        }
      }
    }
    
    function validateForm(frm){
      var ctr = 0;
      var chks = frm.elements["color"];
      for (var i=0; i<chks.length; i++){
         if (chks[i].checked) ctr++;
      }
      if (ctr<2){
        alert("Please select two items.");
        return false;
      }
    
      return true;
    }
    Code:
    <form name="skittles" onsubmit="return validateForm(this);">
    <input type="checkbox" name="color" onClick="clickCtr(this)" id="q1" value="a" />A<BR />
    <input type="checkbox" name="color" onClick="clickCtr(this)" id="q2" value="b" />b<BR />
    <input type="checkbox" name="color" onClick="clickCtr(this)" id="q3" value="c" />c<BR />
    <input type="checkbox" name="color" onClick="clickCtr(this)" id="q4" value="d" />d<BR />
    
    <input type="submit" value="Submit" />
    </form>
    Last edited by glenngv; 05-11-2007 at 09:16 PM.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #13
    Regular Coder
    Join Date
    Nov 2005
    Posts
    225
    Thanks
    2
    Thanked 0 Times in 0 Posts
    When I click submit button, the errors pop up for this particular function ONLY, the rest of them don't validate the form.

    Because I have other functions as well.
    Is there any way that we can place onBlur directly on checkboxex so that when a user check ONLy 1 box and move to next, a pop up message shows up.

    thanks.

    My code:

    <html>
    <head>
    <title></title>
    <script language="javascript">
    <!--
    var maxC=255;
    function limC(obj){
    while(obj.value.length>maxC){
    obj.value=obj.value.replace(/.$/,'');
    }
    }

    function count(){
    c=document.getElementById('count');
    if(!this.checked) c.innerHTML=parseInt(c.innerHTML)+1; //if we're unchecking the box increase the value of count by 1
    else if(c.innerHTML>0) c.innerHTML=parseInt(c.innerHTML)-1; //if we're checking the box and count > 0 then decrease count by 1
    else return false; //otherwise if the box is checked and count = 0 then don't let another box get checked
    }

    function clickd(){
    const numboxes = document.skittles.color.length;
    for(j=1;j<=numboxes;j++)
    document.getElementById('q'+j).onclick=count; //create an onclick event for the checkboxes
    }

    function chFrm() {
    var msgbox = "You forgot the following question\n";
    var goon = msgbox

    if (document.frmName.selectname.value==0) {
    msgbox = msgbox + "\n Please select one name";
    }
    var ctr = 0;
    var chks = frm.elements["color"];
    for (var i=0; i<chks.length; i++){
    if (chks[i].checked) ctr++;
    }
    if (ctr<2){
    alert("Please select two items.");
    return false;
    }

    return true;
    }
    // If no errors found, then go ahead to submit the form
    if (msgbox == goon) {
    return true;
    } else {

    alert(msgbox);
    return false;
    }
    }
    // End -->
    </script>
    </head>

    <body>
    <p>Please check off <span id="count">2</span> boxes </p> <!--Added this line to let users know how many to check off-->
    <form name="skittles">
    <input type="checkbox" name="color" onClick="clickd()" id="q1" value="a" />A<BR /> <!--changed id from "q" to "q1"-->
    <input type="checkbox" name="color" onClick="clickd()" id="q2" value="b" />b<BR />
    <input type="checkbox" name="color" onClick="clickd()" id="q3" value="c" />c<BR />
    <input type="checkbox" name="color" onClick="clickd()" id="q4" value="d" />d<BR />
    </form>

    </body>
    </html>

  • #14
    Regular Coder
    Join Date
    Nov 2005
    Posts
    225
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Can I require a user to check at least 2 but No more than 2 boxes? For example. When I added this function on my existing JS function, it does not work.
    function check_your_checkboxes() {
    var val = $chex.length == 2;
    if (!val) {
    alert('two checked boxes required');
    }
    return val;
    }

    Because I already have this to check for empty field check box.
    var checkboxCk = false;
    for (i = 0; i < document.frmname.chkFields.length; i++) {
    if (document.frmname.chkFields[i].checked)
    checkboxCk = true; }
    if (!checkboxCk) {
    msgbox = msgbox + "\n Question #2, please check on this question";
    }

    Can you show me how to combine them together?

    Thanks.
    Last edited by jennypretty; 05-14-2007 at 06:17 PM.

  • #15
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Code:
    <html>
    <head>
    <script type="text/javascript">
    function clickCtr(chk){
      var ctr = 0;
      var chks = chk.form.elements[chk.name];
      for (var i=0; i<chks.length; i++){
         if (chks[i].checked) ctr++;
      }
      if (ctr==2){
        for (i=0; i<chks.length; i++){ //disable remaining unchecked checkboxes
          if (!chks[i].checked) chks[i].disabled=true;
        }
      }
      else{ //enable all
        for (i=0; i<chks.length; i++){
          chks[i].disabled=false;
        }
      }
    }
    
    function validateForm(frm){
      var ctr = 0;
      var chks = frm.elements["color"];
      for (var i=0; i<chks.length; i++){
         if (chks[i].checked) ctr++;
      }
      if (ctr<2){
        alert("Please check 2 boxes.");
        return false;
      }
    
      return true;
    }
    </script>
    </head>
    <body>
    <form name="skittles" onsubmit="return validateForm(this);">
    <p>Please check off 2 boxes </p>
    <input type="checkbox" name="color" onClick="clickCtr(this)" id="q1" value="a" />A<br />
    <input type="checkbox" name="color" onClick="clickCtr(this)" id="q2" value="b" />b<br />
    <input type="checkbox" name="color" onClick="clickCtr(this)" id="q3" value="c" />c<br />
    <input type="checkbox" name="color" onClick="clickCtr(this)" id="q4" value="d" />d<br />
    
    <input type="submit" value="Submit" />
    </form>
    </body>
    </html>
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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