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 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Limit number of checked checkboxes on html/php

    I need to limit the number of check-boxes the user can check in a form that I have inside a php file.

    I found the solution below on
    http://www.javascriptkit.com/script/...boxlimit.shtml
    which works just fine in case the name of the form input is something straightforward as 'countries' as below.

    In my case the input name needs to be an array or say 'countries[]', which will fetch the user's input and post it to another php file via method POST.

    When I change the input name to "countries[]" the script does not work. I am not at all good with JS so I am asking if somebody could tell me how to modify the script to work for my situation.

    Thanks


    <script type="text/javascript">

    /***********************************************
    * Limit number of checked checkboxes script- by JavaScript Kit (www.javascriptkit.com)
    * This notice must stay intact for usage
    * Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
    ***********************************************/

    function checkboxlimit(checkgroup, limit){
    var checkgroup=checkgroup
    var limit=limit
    for (var i=0; i<checkgroup.length; i++){
    checkgroup[i].onclick=function(){
    var checkedcount=0
    for (var i=0; i<checkgroup.length; i++)
    checkedcount+=(checkgroup[i].checked)? 1 : 0
    if (checkedcount>limit){
    alert("You can only select a maximum of "+limit+" checkboxes")
    this.checked=false
    }
    }
    }
    }

    </script>

    <p>Select your favorite two countries below:</p>

    <form id="world" name="world">
    <input type="checkbox" name="countries" /> USA<br />
    <input type="checkbox" name="countries" /> Canada<br />
    <input type="checkbox" name="countries" /> Japan<br />
    <input type="checkbox" name="countries" /> China<br />
    <input type="checkbox" name="countries" /> France<br />
    </form>

    <script type="text/javascript">

    //Syntax: checkboxlimit(checkbox_reference, limit)
    checkboxlimit(document.forms.world.countries, 2)

    </script>

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,029
    Thanks
    203
    Thanked 2,539 Times in 2,517 Posts
    Try this:-

    Code:
    <form id="world" action = "">
    
    USA <input type="checkbox" name="countries[]" value="USA" onclick="chkChecks('countries[]')">
    Canada<input type="checkbox" name="countries[]" value="Canada" onclick="chkChecks('countries[]')">
    Japan <input type="checkbox" name="countries[]" value="Japan" onclick="chkChecks('countries[]')">
    UK <input type="checkbox" name="countries[]" value="UK" onclick="chkChecks('countries[]')">
    China <input type="checkbox" name="countries[]" value="China" onclick="chkChecks('countries[]')">
    France <input type="checkbox" name="countries[]" value="France" onclick="chkChecks('countries[]')">
    <br>
    <input type = "button" value = "Show choices" onclick = "showchoices('countries[]')"> 
    
    </form>
    
    <script type="text/javascript">
    
    function chkChecks(nme) {
    var isChecked = 0;
    var c = document.getElementsByName(nme);
    for (var i = 0; i < c.length; i++) {
    if (c[i].checked) {
    isChecked ++;
    
    if (isChecked >2) {  // maximum of two checkboxes - change as required
    alert ('You may only select a maximum of two checkboxes');
    c[i].checked = false;
    return false;
    }
    }
    }
    }
    
    function showchoices(nme) {
    var checkedVals = "";
    var report = "You have not selected any boxes!" 
    var c = document.getElementsByName(nme);
    for (var i = 0; i < c.length; i++) {
    if (c[i].checked) {
    checkedVals += c[i].value + " ";
    }
    }
    
    if (checkedVals != "") {report = "You have selected " + checkedVals}
    alert (report);
    }
    
    </script>
    Quizmaster: Castel Gandolfo is the summer residence of which religious leader?
    Contestant: Jesus
    Last edited by Philip M; 01-16-2013 at 03:06 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    blati (01-16-2013)

  • #3
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Great!

    Hi Supreme Master!

    Indeed you are!

    It worked wonderfully! Thanks a lot!

    I saw you added a script (showchoices ) which seems to be meant to stop the user submitting the form in case he does not check any boxes, which is well thought of you. I had not anticipated that.

    That one does not seem to work though. It goes to the page indicated in 'form' 'action', even with no checked boxes. Can you take a look at it?

    It may be the case I just misread its intention, being such a zero in JS, in which case I apologize in advance.

    Thanks again!
    Last edited by blati; 01-16-2013 at 06:00 PM.

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,029
    Thanks
    203
    Thanked 2,539 Times in 2,517 Posts
    Quote Originally Posted by blati View Post
    Hi Supreme Master!

    Indeed you are!

    It worked wonderfully! Thanks a lot!

    I saw you added a script (showchoices ) which seems to be meant to stop the user submitting the form in case he does not check any boxes, which is well thought of you. I had not anticipated that.

    That one does not seem to work though. It goes to the page indicated in 'form' 'action', even with no checked boxes. Can you take a look at it?

    It may be the case I just misread its intention, being such a zero in JS, in which case I apologize in advance.

    Thanks again!
    Well, you were supposed to do that bit yourself as you did not indicate any submit button. showchoices() was intended to do just that - alert the choices made (if any). In fact alerts should be used only for testing purposes, and any real message should be displayed using a <span> and innerHTML. But you can stop form submission with

    Code:
    <form id="world" action = "" onsubmit = "return showchoices('countries[]')"> 
    
    and in the script
    
    alert (report);
    if (checkVals == "") {return false}
    Last edited by Philip M; 01-16-2013 at 07:56 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    blati (01-16-2013)

  • #5
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    Keep in mind that JavaScript can be disabled, so never rely on client-side validation – validate with PHP too.

    air

  • Users who have thanked Airblader for this post:

    blati (01-16-2013)

  • #6
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Philip

    I hate to be a pain, but I tried to place your added script most anywhere in the original script to no avail. It does not seem to stop submission. I do get the alerts though.

    Here is my actual form. It is within a php for loop.

    <FORM id="form1" name="form1" method="post" action="compare.php" onsubmit = "return showchoices('vid[]')" >
    <input type="submit" value="Submit">
    <input type="checkbox" name="vid[]" value= "<?php echo $row["version_id"] ;?>" onclick="chkChecks('vid[]')" />

    I appreciate your patience.

  • #7
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks Airblader, you are absolutely right.

    I was so deep into having things to come up right that I overlooked the fact that I still have to go through the form validation process.

    I do like Philip's approach though.

  • #8
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    JavaScript validation can (and imho should) still be used, simply because it allows real-time validation instead of submitting, validating, showing an error, submitting again, … – just the final validation needs to be server-side.
    That just doesn't go for the number of checkboxes checked – also for correct values etc. JavaScript can't just only be disabled, every modern browser has developer tools integrated that allow changing the website (e.g. if you store the price for an article in a hidden field I can simply change the value to 0 – but hidden fields for sensible data are a no-go anyway), not to mention that I can simply build my own form and just submit it to your page.

    air
    Last edited by Airblader; 01-17-2013 at 07:12 AM.

  • #9
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,029
    Thanks
    203
    Thanked 2,539 Times in 2,517 Posts
    Quote Originally Posted by blati View Post
    Philip

    I hate to be a pain, but I tried to place your added script most anywhere in the original script to no avail. It does not seem to stop submission. I do get the alerts though.

    Here is my actual form. It is within a php for loop.

    <FORM id="form1" name="form1" method="post" action="compare.php" onsubmit = "return showchoices('vid[]')" >
    <input type="submit" value="Submit">
    <input type="checkbox" name="vid[]" value= "<?php echo $row["version_id"] ;?>" onclick="chkChecks('vid[]')" />

    I appreciate your patience.
    Did you include the line

    if (checkVals == "") {return false}

    You say "I am not at all good with JS". But if you wish to use a tool, surely you should learn how to use it yourself and not simply rely on others to guide every action.
    Last edited by Philip M; 01-17-2013 at 08:05 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #10
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Philip

    Thank you for your help, not for the lecture.


  •  

    Tags for this Thread

    Posting Permissions

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