click up to 5 checkboxes

  • dmch4mleys
  • Born
  • Born
  • dmch4mleys
  • Posts: 4

Post 3+ Months Ago

hi there ppl.

i have a competition running whereby i want the user to click up to 5 answers. the user has a choice of 12 answers (12 checkboxes). i am stuck as to how to code the script so the maximum number of checkboxes that can be ticked is 5. any helpers please?
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8397
  • Loc: USA

Post 3+ Months Ago

I think you could do that in Javascript:
Code: [ Select ]
function check_form(el_id) {
    var el = document.getElementsByName("check")
    var p = 0
    var submit = true
    var max = 5
    var min = 4
   
    for(i=0; i < el.length; i++)
    {
        if(el[i].checked)
        {
            p++
        }
    }
   
    if(p > max || p < min)
    {
        alert('You can select anywhere from ' + min + ' to ' + max + ' checkboxes.')
    }
    else
    {
        if(submit == true)
        {
            el_id.action = 'action.html'
            el_id.submit()
        }
        else
        {
            // Do whatever here...
        }
    }
}
  1. function check_form(el_id) {
  2.     var el = document.getElementsByName("check")
  3.     var p = 0
  4.     var submit = true
  5.     var max = 5
  6.     var min = 4
  7.    
  8.     for(i=0; i < el.length; i++)
  9.     {
  10.         if(el[i].checked)
  11.         {
  12.             p++
  13.         }
  14.     }
  15.    
  16.     if(p > max || p < min)
  17.     {
  18.         alert('You can select anywhere from ' + min + ' to ' + max + ' checkboxes.')
  19.     }
  20.     else
  21.     {
  22.         if(submit == true)
  23.         {
  24.             el_id.action = 'action.html'
  25.             el_id.submit()
  26.         }
  27.         else
  28.         {
  29.             // Do whatever here...
  30.         }
  31.     }
  32. }

and the HTML example would be...
HTML Code: [ Select ]
<form id="form" onsubmit="check_form(this)">
<p>Select up to five checkboxes:<br />
<input type="checkbox" name="check" /> Checkbox 1<br />
<input type="checkbox" name="check" /> Checkbox 2<br />
<input type="checkbox" name="check" /> Checkbox 3<br />
<input type="checkbox" name="check" /> Checkbox 4<br />
<input type="checkbox" name="check" /> Checkbox 5<br />
<input type="checkbox" name="check" /> Checkbox 6<br />
<input type="checkbox" name="check" /> Checkbox 7<br />
<input type="checkbox" name="check" /> Checkbox 8<br />
<input type="checkbox" name="check" /> Checkbox 9<br />
<input type="checkbox" name="check" /> Checkbox 10<br />
<input type="submit" name="submit" value="submit" /> <input type="reset" name="reset" value="Reset" /></p>
</form>
  1. <form id="form" onsubmit="check_form(this)">
  2. <p>Select up to five checkboxes:<br />
  3. <input type="checkbox" name="check" /> Checkbox 1<br />
  4. <input type="checkbox" name="check" /> Checkbox 2<br />
  5. <input type="checkbox" name="check" /> Checkbox 3<br />
  6. <input type="checkbox" name="check" /> Checkbox 4<br />
  7. <input type="checkbox" name="check" /> Checkbox 5<br />
  8. <input type="checkbox" name="check" /> Checkbox 6<br />
  9. <input type="checkbox" name="check" /> Checkbox 7<br />
  10. <input type="checkbox" name="check" /> Checkbox 8<br />
  11. <input type="checkbox" name="check" /> Checkbox 9<br />
  12. <input type="checkbox" name="check" /> Checkbox 10<br />
  13. <input type="submit" name="submit" value="submit" /> <input type="reset" name="reset" value="Reset" /></p>
  14. </form>

The Javascript uses the name for retrieving the info...

If you don't like Javascript and if your server allows PHP, you could do the same in PHP (But less convenient for the user).
You can have the name be the same in all of those check boxes (such as check[] those "[]" make the check value as an array and then you can count how many of those are there.
PHP Code: [ Select ]
<?php
$checked = $_POST['check'];
if(count($checked) > 5)
{
     echo 'You can\'t select more than 5 checkboxes. Go back and fix that.';
}
else
{
     // Do other stuff
}
?>
  1. <?php
  2. $checked = $_POST['check'];
  3. if(count($checked) > 5)
  4. {
  5.      echo 'You can\'t select more than 5 checkboxes. Go back and fix that.';
  6. }
  7. else
  8. {
  9.      // Do other stuff
  10. }
  11. ?>

It's all up to you.
  • dark_lord
  • Graduate
  • Graduate
  • User avatar
  • Posts: 162
  • Loc: India-Kolkata

Post 3+ Months Ago

in javascript code, u may adopt this piece of code to make it more dynamic

change the var min from 4 to 1
Code: [ Select ]
var min = 1


and then put check_form in check boxes also, like this

Code: [ Select ]
<input type="checkbox" name="check" onclick="check_form(this)" /> Checkbox 1<br />
    <input type="checkbox" name="check" onclick="check_form(this)" /> Checkbox 2<br />
    <input type="checkbox" name="check" onclick="check_form(this)" /> Checkbox 3<br />
..... etc
  1. <input type="checkbox" name="check" onclick="check_form(this)" /> Checkbox 1<br />
  2.     <input type="checkbox" name="check" onclick="check_form(this)" /> Checkbox 2<br />
  3.     <input type="checkbox" name="check" onclick="check_form(this)" /> Checkbox 3<br />
  4. ..... etc


it will prompt the user when they will check more then 5 check boxes

and bogey great piece of code :P
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8397
  • Loc: USA

Post 3+ Months Ago

dark_lord wrote:
in javascript code, u may adopt this piece of code to make it more dynamic

change the var min from 4 to 1
Code: [ Select ]
 
var min = 1
 
  1.  
  2. var min = 1
  3.  

Ooops! I was testing the code and forgot to switch it back to one when I was done testing
dark_lord wrote:
and then put check_form in check boxes also, like this

Code: [ Select ]
 
<input type="checkbox" name="check" onclick="check_form(this)" /> Checkbox 1<br />
    <input type="checkbox" name="check" onclick="check_form(this)" /> Checkbox 2<br />
    <input type="checkbox" name="check" onclick="check_form(this)" /> Checkbox 3<br />
..... etc
 
  1.  
  2. <input type="checkbox" name="check" onclick="check_form(this)" /> Checkbox 1<br />
  3.     <input type="checkbox" name="check" onclick="check_form(this)" /> Checkbox 2<br />
  4.     <input type="checkbox" name="check" onclick="check_form(this)" /> Checkbox 3<br />
  5. ..... etc
  6.  


it will prompt the user when they will check more then 5 check boxes
Makes sense...
dark_lord wrote:
and bogey great piece of code :P

Thanks :D This was my first real attempt at Javascript... it took me an hour to get the damn thing working correctly :lol: I'm trying to learn Javascript. (Knowing PHP already kind of helps).

[EDIT:] If you want to do it dark_lord's way with all of those onclick()'s in the input thing then the following Javascript is more suitable for you...
JAVASCRIPT Code: [ Select ]
<script language="JavaScript">
    function check_form(el_id) {
        var el = document.getElementsByName("check")
        var p = 0
        var max = 5
        var min = 1
       
        for(i=0; i < el.length; i++)
        {
            if(el[i].checked)
            {
                p++
            }
           
            if(p > max || p < min)
            {
                alert('You can select anywhere from ' + min + ' to ' + max + ' checkboxes.')
                el[i].checked = false
                break
            }
        }
    }
</script>
  1. <script language="JavaScript">
  2.     function check_form(el_id) {
  3.         var el = document.getElementsByName("check")
  4.         var p = 0
  5.         var max = 5
  6.         var min = 1
  7.        
  8.         for(i=0; i < el.length; i++)
  9.         {
  10.             if(el[i].checked)
  11.             {
  12.                 p++
  13.             }
  14.            
  15.             if(p > max || p < min)
  16.             {
  17.                 alert('You can select anywhere from ' + min + ' to ' + max + ' checkboxes.')
  18.                 el[i].checked = false
  19.                 break
  20.             }
  21.         }
  22.     }
  23. </script>

And now you should have the action attribute in the form <form action="something.php" method="get">. :D

The only problem with this piece of code though (I just found out) is that if you select the 1st, then the 2nd then the 3rd then the 6th and then the 5th checkbox, the 6th (Being the last on the checkbox list) is unchecked... not the last one to be checked...

Post Information

  • Total Posts in this topic: 4 posts
  • Users browsing this forum: Bogey and 114 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.