How to get chosen values from HTML form that uses checkboxlimit

Hello, i’m using this form code :

<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>

with this script that limits the number of activated checkboxes :

<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>

After the form is submitted i need to see what was chosen, but if i dump the variables using the following code in order.php :

<?php
    foreach($_POST as $key=>$post_data){
        echo "You posted:" . $key . " = " . $post_data . "<br>";
    }
?>

It just displays :

You posted:countries = on

How can i get to the actual data? I see it must have something to do with the fact that each input currently has the same name but i don’t know how to progress from here.

Many thanks for any help available.

For some reason it hasn’t posted my form code or the javascript code, is there a proper method for posting code that i haven’t used ?

Not sure why your code isn’t appearing.

If the checkboxes all have the same name (but each must have a unique ID, if ID is used, at all), then all checked values are assembled as a comma-delimited list.

So if your checkbox values are the same as the display of country names, and the user checks “USA” and “Japan”, then the post value will be “USA,Japan”.

HTH,

:slight_smile:

UPDATE: Ah… you didn’t give the checkboxes any VALUE. Give each the value of the country name. (The ‘on’ value just means that the checkboxes exist in the form scope. If no checkboxes were checked, there would be no element named ‘countries’ because an empty checkbox doesn’t exist when the form is submit.)

Hi WolfShade and thanks very much for your reply, i feel a bit silly not having put the values in but it’s been a while since i coded HTML !

I can see the code now, not sure why i couldn’t before.

I’ve added the value terms now and this is how the form looks :

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

<form id="world" name="world" action="/order.php" method="post">
<input type="checkbox" name="countries" value="USA" /> USA<br />
<input type="checkbox" name="countries" value="Canada" /> Canada<br />
<input type="checkbox" name="countries" value="Japan" /> Japan<br />
<input type="checkbox" name="countries" value="China" /> China<br />
<input type="checkbox" name="countries" value="France" /> France<br />
<input type="submit" value="Order">
</form>

The script to limit the number of checkboxes is called like this :

<script type="text/javascript">
checkboxlimit(document.forms.world.countries, 2)
</script> 

This is what i have in order.php :

<?php
    foreach($_POST as $key=>$post_data){
        echo "You posted:" . $key . " = " . $post_data . "<br>";
    }
?>

Now, order.php shows only the last item that was checked, even though i thought it would iterate through the passed values.

Any help in geting all the values is greatly appreciated :smile:

Thanks,

progman.

There might be some kind of delay to make sure the code doesn’t contain anything malicious. (That’s just a guess… I’ve never had a problem with code appearing, before.)

Are you sure that it’s not displaying the two countries with a comma between them? If the names are identical, this should be the case. If there’s only ONE country showing, I’m not sure what could be causing that.

:slight_smile:

@progman you’ll need to format your code properly to have it appear.

To do this, highlight a code block in the editor and hit the </> button.
Inline styles can be achieved using backticks `

I’ll edit your previous post now.

Thanks very much Pullo, i’ll be sure to do that in the future.

Thanks again WolfShade.

The output is definitely jsut a single country, always the last one ticked, this is the output :

array(1) {
[“countries”]=>
string(5) “China”
}

Thanks.

How are you outputting that? (The ‘array(1)’ thing.)

I took your form and made it a .cfm file on my dev machine. I am dumping the form scope when the form is submit.

If I check ‘USA’ and ‘Japan’ and submit the form, the dump is showing ‘USA,Japan’ as the value of “countries” in the form scope.

:slight_smile:

I’m outputting it from order.php, which contains just this code as a test :

<?php var_dump($_POST);?>

I’ve also tried this code for output :

<?php foreach($_POST as $key=>$post_data){ echo "You posted:" . $key . " = " . $post_data . "
"; } ?>

Which results in this :

You posted:countries = Canada

I’ve realisedit doesn’t output the last one ticked, it outputs the last one on the list that is ticked.

Thanks very much for testing it at your end, i’m very grateful.

There must be SOMEthing different, here. I know PHP doesn’t process things (fundamentally) any different than any other scripting language. When the form is submit, if you have more than one checkbox checked, that value appears as a comma-delimited list of the checked values of those checkboxes (assuming the checkboxes all have the same name.)

I’m not seeing something.

:slight_smile:

Thanks again WolfShade.

I’m not seeing SOMEthing either :frowning:

I’m reading up on PHP and forms to try and track down the problem and will post when i find a solution.

Thanks again for your help,

progman.

OK i got the form code to pass every value ticked by using array notation :

<input type="checkbox" name="countries[]" value="Canada" /> Canada<br />
                                                             ^^

But now my javascript won’t work because it doesn’t expect to be passed an array.

I havent learned JS so am unsure how to modify the script :

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
            }
        }
    }
}

Also, i can’t see images in the buttons in the question editor (quote whole post, strong etc …), may be my adblocker ?

If using jQuery, you could do:

<form id="world" name="world" action="/order.php" method="post">
    <div id="limited">
        <label><input type="checkbox" name="countries[]" value="USA" />USA</label>
        <br />
        <label><input type="checkbox" name="countries[]" value="Canada" />Canada</label>
        <br />
        <label><input type="checkbox" name="countries[]" value="Japan" />Japan</label>
        <br />
        <label><input type="checkbox" name="countries[]" value="China" />China</label>
        <br />
        <label><input type="checkbox" name="countries[]" value="France" />France</label>
        <br />
    </div>
    <input type="submit" value="Order">
</form>

and:

$("#limited input:checkbox").on("change", function(){
    var totalChecked = $(this).parent("div").find(":checked").length;
    if(totalChecked > 2){
      alert("Maximum two");
      $(this).prop("checked", false);
    }
});

Demo

Note the use of the <label> tag to ensure that the check boxes are toggled when you click the corresponding text (e.g. “USA”, “Canada”).

1 Like

When the form submits, although the value passed is a comma-delimited list, before it’s posted all checkboxes with the same name can be treated as an array (I think they are collectively an array-like object.) So the array notation for the name shouldn’t be necessary. And, as you’ve discovered, is breaking the validation that you already have in place.

The thing that confuses me about your checkboxlimit function is that it appears as though it’s adding an onclick event to all the checkboxes, but that should already be in place BEFORE the validation is actuated.

:slight_smile:

1 Like

It is for PHP where only the last field with each name gets passed unless it is explicitly defined as an array.

I always recomment leaving names for the server side processing and using ids for all JavaScript processing (except for radio buttons).

1 Like

Thanks everyone for help and comments.

I’m doing this on a wordpress site which needs to be live next week so i will use Gravity forms for the sake of speed.

Thanks again,

progman.