Capturing the value from multiple checkboxes with same value

Question

I'm stuck here. I'm basically have a set up where a user can dynamically add a new "item" row and inside each row is a checkbox. When the checkbox is checked, the value in the DB should be stored as 1 and if not, it is automatically stored as 0 (I have written up all this code).

However, I've got a much more fundamental problem: when a checkbox isn't checked, nothing is posted and thus my array's size is not what I expect it to be. Below, is some sample code which highlights my problem:

<form action="" method="post" target="_blank">
Enter name for item 1 <input type="text" name="item_name[]" required>  <input type="checkbox" name="item_checked[]" value="yes"> <br />
Enter name for item 2 <input type="text" name="item_name[]" required>  <input type="checkbox" name="item_checked[]" value="yes"> <br />
Enter name for item 3 <input type="text" name="item_name[]" required>  <input type="checkbox" name="item_checked[]" value="yes"> <br />
<input type="submit" value="Submit">
</form>

<?php
for($i = 0; $i < count($_POST['item_name']); $i++){
    $itemName = $_POST['item_name'][$i];
    $itemChecked = "no";
    if(isset($_POST['item_checked'][$i]) && $_POST['item_checked'][$i] == "yes"){
        $itemChecked = "yes";   
    }
    echo "item_name: $itemName, i: $i, itemChecked $itemChecked <br />";
}

?>

Simply speaking, the item_name textboxes are mandatory. The checkboxes (obviously) aren't. What I would like for to happen is if I check only the second checkbox, then this is registered in the POST data (but currently, when nothing is checked, nothing is posted so the value of $i is different and this it is set for the first item).

EDIT: I've added my entire (simplified) version of the code including the functionality where I add and remove rows, so you can better understand the issue:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(".addCF").click(function(){
        $("#products").append('<tr><td>Enter name for item <input type="text" name="item_name[]"> <input type="checkbox" name="item_checked[]" value="yes"> <a href="javascript:void(0);" class="remCF tip" title="Remove this item">Remove</a></td></tr>');
    });
    $("#products").on('click','.remCF',function(){
        $(this).parent().parent().remove();
    });
});
</script>


<a href="javascript:void(0);" class="addCF">Add</a>


<form action="" method="post" target="_blank">

<table id="products">
<tr><td>Enter name for item <input type="text" name="item_name[]">  <input type="checkbox" name="item_checked[]" value="yes"> <a href="javascript:void(0);" class="remCF tip" title="Remove this item">Remove</a></td></tr>

</table>

<input type="submit" value="Submit">
</form>


<?php
for($i = 0; $i < count($_POST['item_name']); $i++){
    $itemName = $_POST['item_name'][$i];
    $itemChecked = "no";
    if(isset($_POST['item_checked'][$i]) && $_POST['item_checked'][$i] == "yes"){
        $itemChecked = "yes";   
    }
    echo "item_name: $itemName, i: $i, itemChecked $itemChecked <br />";
}

?>

TL, DR: The checkbox is not correctly posted with the item.

I thought about using a unique value* for each row, however this presents issues in other areas: in my main application, new rows are added via a button click dynamically — aqibjr1
– aqibjr1, Commented Sep 6, 2016 at 19:19

Patrick Q · Accepted Answer · 2016-09-06 21:25:22Z

Since you are dynamically adding and removing rows, you basically need something that will also dynamically re-index your input arrays. So every time you add or remove a row, the script will iterate through all of the current rows and assign the zero-based row number as the index for the inputs in that row.

Here's the javascript that you can use:

$(document).ready(function(){
    $(".addCF").click(function(){

        $("#products").append('<tr><td>Enter name for item <input type="text" name="item_name[]" data-basename="item_name"> <input type="checkbox" name="" value="yes" data-basename="item_checked"> <a href="javascript:void(0);" class="remCF tip" title="Remove this item">Remove</a></td></tr>');
        updateNames();
    });
    $("#products").on('click','.remCF',function(){
        $(this).parent().parent().remove();
        updateNames();
    });

    function updateNames()
    {

        $("tr").each(function(i){ 
            $(this).children('td').each(function(){
                $(this).children('input').each(function(){
                    $(this).attr("name", $(this).data("basename")+"["+i+"]");
                });
            });
        });

    }
});

And here's your updated HTML:

<a href="javascript:void(0);" class="addCF">Add</a>


<form action="" method="post" target="_blank">

<table id="products">
<tr><td>Enter name for item <input type="text" name="item_name[0]" data-basename="item_name">  <input type="checkbox" name="item_checked[0]" data-basename="item_checked" value="yes"> <a href="javascript:void(0);" class="remCF tip" title="Remove this item">Remove</a></td></tr>

</table>

<input type="submit" value="Submit">
</form>

Your PHP should not need to change.

Live example of the HTML and javascript

aqibjr1 · Accepted Answer · 2016-09-07 14:39:15Z

Thanks everybody. I took inspiration from Patrick's javascript idea and managed to solve it in this way. A bit fiddly, but I think it works fine!

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(".addCF").click(function(){
        $("#products").append('<tr><td>Enter name for item <input type="text" name="item_name[]"> <input class="vatcheckbox" type="checkbox" name="item_checked[]" value="" data-basename="item_checked"> <a href="javascript:void(0);" class="remCF tip" title="Remove this item">Remove</a></td></tr>');
    updateValues();
    });
    $("#products").on('click','.remCF',function(){
        $(this).parent().parent().remove();
    updateValues();
    });



function updateValues()
    {

        $("tr").each(function(i){ 
            $(this).children('td').each(function(){
                $(this).children('input[type=checkbox]').each(function(){
                    $(this).attr("value", $(this).data("basename")+"["+i+"]");
                });
            });
        });

    }


});
</script>


<a href="javascript:void(0);" class="addCF">Add</a>


<form action="" method="post" target="_blank">

<table id="products">
<tr><td>Enter name for item <input type="text" name="item_name[]">  <input type="checkbox" class="vatcheckbox" name="item_checked[]" data-basename="item_checked" value="item_checked[0]"> <a href="javascript:void(0);" class="remCF tip" title="Remove this item">Remove</a></td></tr>

</table>

<input type="submit" value="Submit">
</form>


<?php


if(isset($_POST['item_checked'])){
    $itemsChecked = array();

    foreach($_POST['item_checked'] as $item){
        $pattern = '/(item_checked\[)([0-9]+)(\])/';
        $success = preg_match($pattern, $item, $match);
        array_push($itemsChecked, $match[2]);
    }
}


if(isset($_POST['item_name'])){

    for($i=0; $i<count($_POST['item_name']); $i++){
        echo $_POST['item_name'][$i];
        if(in_array($i, $itemsChecked)){
            echo " checked";
        }
        echo "<br />";
    }

}


?>

The rows are counted by javascript then these are attached to the value field in the respective checkboxes. I then use some regex to extract the row number, storing this in an array. Then when I'm looping through my item names, I just checked if the current index was in the aforementioned array, if so I print "checked" (obviously you can set a varibable here). Thanks everyone!

The One and Only ChemistryBlob · Accepted Answer · 2016-09-06 19:32:17Z

0

Give the checkboxes different name attributes or else you won't be able to tell the difference between them w/o using Javascript (which you didn't tag) and then see if array key is present when the form is submitted:

$checkbox_map = array();
foreach($_POST as $key=>$value) {

    if (strpos($key, "item_checked") === 0) $checkbox_map[$key] = 1;

}

If using this method you can remove the array notation [] in the name attribute for the checkboxes.

edited Sep 6, 2016 at 19:32

answered Sep 6, 2016 at 19:22

The One and Only ChemistryBlob

7,90211 gold badges41 silver badges76 bronze badges

3 Comments

aqibjr1 Over a year ago

Not sure that this would work for me. There will be an arbitary number of user-generated rows. So I cannot possibly come up with variables for all of them. A user clicks a button and displays new row (with jquery). Appreciated, nonetheless

The One and Only ChemistryBlob Over a year ago

Sure, just number them using javascript - I'll edit my answer

aqibjr1 Over a year ago

Thanks, if you look at my original question, you can see how I'm adding the rows. Is there any way to add the uniqueness to each row?

Naizy Monteiro · Accepted Answer · 2016-09-06 20:27:40Z

-1

To add uniqueness: In php add directly

<form action="" method="post" target="_blank">
Enter name for item 1 <input type="text" name="item_name[0]" required>  <input type="checkbox" name="item_checked[0]" value="yes"> <br />
Enter name for item 2 <input type="text" name="item_name[1]" required>  <input type="checkbox" name="item_checked[1]" value="yes"> <br />
Enter name for item 3 <input type="text" name="item_name[2]" required>  <input type="checkbox" name="item_checked[2]" value="yes"> <br />

Now in js

$(".addCF").click(function(){
    index= $("#products [name^='item_name']").length
    $("#products").append('<tr><td>Enter name for item <input type="text" name="item_name['+index+']"> <input type="checkbox" name="item_checked['+index+']" value="yes"> <a href="javascript:void(0);" class="remCF tip" title="Remove this item">Remove</a></td></tr>');
});

Your form items will get submitted in a similar way as it currently does. But in this case you will not get an index mismatch :)

answered Sep 6, 2016 at 20:27

Naizy Monteiro

765 bronze badges

1 Comment

Patrick Q Over a year ago

The row removal feature that the OP has can result in your solution creating multiple rows with the same index.

Collectives™ on Stack Overflow

Capturing the value from multiple checkboxes with same value

4 Answers 4

Comments

Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related