Using unchecked and checked boxes in array

Question

I have a table that allows the user to add rows to it. The table has four columns. Items, Qty, Price, and Tax. The tax column is a check box. I am using the hidden input to set a value for an unchecked box. This way I can take the post data and know if I should charge tax on a specific row. (0 value means no tax, 1 value means charge tax) The problem I have is when putting check boxes in an array it will always pick up the hidden value.

Table:

<table style="width: 90%" id="myTable" class="centered-table table table-bordered">
 <thead>
  <tr>
     <th>Item*</th>
     <th>Qty*</th>
     <th>Price*</th>
     <th>Tax</th>
     <th>Action</th>
    </tr>
   </thead>
   <tbody>
    <tr>
       <td style="width: 60%"><input type="text" id="detail" name="detail[]"required></td>
       <td style="width: 8%"><input type="number" id="qty" name="qty[]" required></td>
       <td style="width: 12%"><input type="number" id="price" name="price[]" required></td>
       <input type="hidden" value="0" name="tax[]">
       <td style="width: 5%"><input type="checkbox" id="tax" name="tax[]" value="1"></td>
       <td style="width: 12%"><div class="inline"><input type="button" id="addButton" class="btn btn-primary btn-xs" value="Add"/></div><div class="inline"><input type="button" id="deleteButton" class="btn btn-primary btn-xs" value="Delete"/></div>
      </tr>
    </tbody>

For example: I have four rows. The first and last row are checked. The array looks like this [0,1,0,0,0,1] I need the array to look like this [1,0,0,1] Is this possible or do I need to try a completely different method of getting unchecked and checked boxes? I have tried to come up with a loop that will take away zeros but I can always find a combination of checked and unchecked boxes that will make it fail.

This is my javascript to add rows to the table

$(function(){
    $("#addButton").click(function(){
        $(this).closest("tr").clone(true).appendTo("#myTable");
    });

$("#deleteButton").click(function(){
    var x = $('#myTable tr').length;
    if(x == 2){

    } else {
         $(this).closest("tr").remove();
    }

    });
});

Sammitch · Accepted Answer · 2016-08-25 01:04:00Z

4

Unchecked checkboxes are simply never sent to server, and you need to adjust your form to accommodate that. I would suggest something like:

<form ...>
    <input name="obj[0][name]" type="text">
    <input name="obj[0][qty]" type="text">
    <input name="obj[0][price]" type="text">
    <input name="obj[0][tax]" type="checkbox">

    <input name="obj[1][name]" type="text">
    <input name="obj[1][qty]" type="text">
    <input name="obj[1][price]" type="text">
    <input name="obj[1][tax]" type="checkbox">
    ...
</form>

And then you can reliably test for whether or not that a given box was checked by checking for the existence of the tax index in the resulting array which should look something like:

$_POST['obj'] == [
    [
        'name' => ...,
        'qty' => ...,
        'price' => ...
    ],
    [
        'name' => ...,
        'qty' => ...,
        'price' => ...,
        'tax' => ...
    ]
]

answered Aug 25, 2016 at 1:04

Sammitch

32.5k7 gold badges58 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

bobthegoalie Over a year ago

I added my function to add and delete rows from my table. How would I go about adding a row and increasing the obj[0] to obj[1] to obj[2] and so on?

Collectives™ on Stack Overflow

Using unchecked and checked boxes in array

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related