带有jQuery序列化方法的多个表格不起作用

Question

我有多个表格，每个表格都被提交，但不是第一个表格。

我尝试了event.preventDefault();

之类的一切

我的代码：

<?php for($i=0;$i<=5;$i++){ ?>
<form id="form<?php echo $i; ?>>
<td><?php echo $i++ ?><td>
<td><input type="text" name="detention_unloading_charges"   value="<?php echo $history[$i]->name; ?>"></td>
<td><input type="text"  name="dtn_chrg_per_day" value="<?php echo $history[$i]->dtn_chrg_per_day; ?>"></td>
<td><input type="text"  name="dtn_chrg" value="<?php echo $history[$i]->dtn_chrg; ?>"></td>
<td>
<button class="btn btn-secondary" type="button" onclick="save_changes(<?php echo $i ?>);">Save Changes</button></td>
</form>
}

和jQuery函数：

function save_changes(id)
{
    $.ajax({
        url: "History/update",
        type: "POST",
        data: $('#form'+id).serialize(),
        success: function(data) {
            // Success message
            console.log(data);
            if(data==1){
                $('.success_pop_up').addClass('show').removeClass('d-none');
            } else{
                $('.failure_pop_up').addClass('show').removeClass('d-none');;
            }
        }
   });
}

Answer 1

您在开始时通过echo $i++进行了两次$ i，它也会增加$ i在循环外的$ i，因此循环仅运行三次，表单ID是form0，但是相应的函数是save_changes（save_changes（1），该表格ID根本不存在，请尝试以下代码。

    <?php for($i=0;$i<=5;$i++){ ?>
    <form id="form<?php echo $i; ?>>
    <td><?php echo $i?><td>
    <td><input type="text" name="detention_unloading_charges"   value="<?php echo $history[$i]->name; ?>"></td>
    <td><input type="text"  name="dtn_chrg_per_day" value="<?php echo $history[$i]->dtn_chrg_per_day; ?>"></td>
    <td><input type="text"  name="dtn_chrg" value="<?php echo $history[$i]->dtn_chrg; ?>"></td>
    <td>
    <button class="btn btn-secondary" type="button" onclick="save_changes(<?php echo $i ?>);">Save Changes</button></td>
    </form>    
    <?php  } ;?>

尝试此代码，让我知道它是否有效。

Answer 2

您可能需要以以下方式解决此问题：

让按钮进行默认提交，这样：

<button type="submit">Send</button>

在jQuery中查看表格的提交活动：

$('form').on('submit', function(e) {
    // Prevent default so the browser doesnt automatically submit it.
    e.preventDefault();
    var data = $(this).serialize();
    // ... send it
});

这样，进行AJAX表单请求要容易得多。