javascript - Jquery动态添加行不允许保存数据

Question

我有一个表单，其中有一个按钮，允许动态添加表单字段。表单本身可以很好地保存数据，但是当我添加行时，除了复选框数据之外，数据都可以很好地保存。如果我添加行，保存表单，然后重新打开并应用复选框，它就可以工作。

这是我的代码:

//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'));
});

与表单相关的表格数据:

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

调用事件的按钮:

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

工作代码:

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

Answer 1

我认为问题出在您的 javascript 代码中，因为当您保存表单并刷新时，只有 php 脚本正在执行代码。问题在于通过 javascript 生成的输入的名称属性，并且恰好在这一行中:

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

请在输入名称中使用动态变量“i”。试试这个:

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

此外，在回调函数内分配 i 变量，如下所示:

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

说明:即使显示了复选框，它们也具有相同的名称属性，因此提交的表单通常应仅包含这些值中的一个值，我认为它将获得最后一个值。

祝你好运!