Limit number of checked checkboxes on html/php

[blati]

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>

[Philip M]

Try this:-

<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

[blati]

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!

[Philip M]

Originally Posted by blati

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

<form id="world" action = "" onsubmit = "return showchoices('countries[]')"> 

and in the script

alert (report);
if (checkVals == "") {return false}

[Airblader]

Keep in mind that JavaScript can be disabled, so never rely on client-side validation – validate with PHP too.

air

[blati]

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.

[blati]

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.

[Airblader]

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

[Philip M]

Originally Posted by blati

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.

[blati]

Philip

Thank you for your help, not for the lecture.