Jquery dynamically added rows do not allow saved data

Question

I have a form that has a button that allows form fields to be dynamically added. The form itself saves data fine, but when I add rows, the data is saved fine EXCEPT for checkbox data. If I add the rows, save the form, then reopen and apply checkboxes, it works though.

Here is my code :

//adds extra table rows
var i=$('table tr').length;
$(".addmore").on('click',function(){
    addNewRow();
});

$(document).on('keypress', ".addNewRow", function(e){
    var keyCode = e.which ? e.which : e.keyCode;
    if(keyCode == 9 ) addNewRow();
});

var addNewRow = function(){
html = '<tr>';
html += '<td><input type="checkbox" name="data[InvoiceDetail][0][added]" id="added_1'+i+'" class="form-control autocomplete_txt" autocomplete="off"></td>';
html = '</tr>';
$('table').append(html);
$('#caseNo_'+i).focus();
i++;
}

//to check all checkboxes
$(document).on('change','#check_all',function(){
    $('input[class=case]:checkbox').prop("checked", $(this).is(':checked'));
});

Table data pertaining to form :

<?php if(isset($invoice['InvoiceDetail'])&&!empty($invoice['InvoiceDetail'])){?>
                                    <?php foreach ( $invoice['InvoiceDetail'] as $key=>$item){?>
                                        <tr id="tr_<?php echo $key+1?>">
                                            <td> <input class="case" type="checkbox"/> </td>
                                            <td class="prod_c">
                                            <td><input type="checkbox" <?php if(isset($item['added']) && $item['added'] == 1) echo "checked=\"checked\""?> data-type="checkbox" name="data[InvoiceDetail][<?php echo $key;?>][added]" id="added_<?php echo $key+1?>" class="form-control autocomplete_txt" autocomplete="off"></td>
                                        </tr>

Button to call event :

<div class='row'>
                    <div>
                        <button class="btn btn-danger delete" type="button">- Delete</button>
                        <button class="btn btn-success addmore" type="button">+ Add More</button>
                        <button class="btn btn-success copy" type="button">Copy Selected</button>
                    </div>
                </div>

Working Code :

html += '<td><input type="checkbox" name="data[InvoiceDetail]['+i+'][added]" id="added_1'+i+'" class="form-control autocomplete_txt" autocomplete="off"></td>';

Mehdi Benmoha · Accepted Answer · 2015-12-21 15:33:31Z

1

I think that the problem is in your javascript code because when you save the form and refresh, only the php script is executing the code. The problem resides in the name attribut of your generated inputs via javascript, and exactly in this line:

html += '<td><input type="checkbox" name="data[InvoiceDetail][0][added]" id="added_1'+i+'" class="form-control autocomplete_txt" autocomplete="off"></td>';

Use the dynamic variable "i" in your input name instead. Try this :

html += '<td><input type="checkbox" name="data[InvoiceDetail][i][added]" id="added_1'+i+'" class="form-control autocomplete_txt" autocomplete="off"></td>';

Also, assign the i variable inside the callback function like this:

//adds extra table rows
var i=0;
$(".addmore").on('click',function(){
    i=$('table tr').length;
    addNewRow();
});

Explaination: Even if the checkbox are shown they all have the same name attribut so the submitted form should normally contain only one value from those and I think that it will get the last one.

Good luck !

edited Dec 21, 2015 at 15:33

answered Dec 21, 2015 at 15:02

Mehdi Benmoha

3,9853 gold badges25 silver badges54 bronze badges

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

3 Comments

Steven Over a year ago

odd thing is, that worked to fix the FIRST added line, but every line thereafter same problem :?

Mehdi Benmoha Over a year ago

You can check the value of the i variable in the browser inspector for the new items

Steven Over a year ago

finally fixed the issue. used the code that you mentioned, as well as modified the html += to be as what I edited above

Collectives™ on Stack Overflow

Jquery dynamically added rows do not allow saved data

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related