php - 如何使用ajax更新表单结构

Question

最近我一直在研究一个联系模块。有 3 列，即。 name、email、phone 和一个 +1 按钮，其中包含一个新行以使用 ajax 添加一个联系人. 问题就出现在这里。 当我更新我的结构时，旧联系人字段中的数据消失了。

例如:

我输入了 2 行并将数据填充为 name1、email1 等等。

name1 email1 phone1
name2 email2 phone2

现在，为了再添加一个联系人，我使用 +1 按钮。当我点击它时，我得到:

blank_1 blank_1 blank_1
blank_2 blank_2 blank_2
blank_3 blank_3 blank_3   //here blank_1, blank_2, blank_3 are just expressing blank columns

我的 jquery 代码是:

<script>
$(document).ready(function(e) {
num = 0;

$('#plus_contact').click(function(e) {
    num = num +1 ;
    $.ajax({
        url : 'contact/contact_form.php',
        method : 'POST',
        data : "number="+num,
        success : function(data) {
                    $('#contact_form_div').html(data);
                },
    });
});
}); </script>

contact_form.php

<?php
if(isset($_POST['number']) && is_numeric($_POST['number']))
{

    echo $list =$_POST['number'];
    if($list == 1)
    {
        for($i=0; $i<$list;$i++)
        {
        ?>
        <div class="form-group">
            <label class="sr-only" for="exampleInputEmail2">Full Name</label>
            <input type="text" name="c_name[]" class="form-control" id="c_full_name" placeholder="Full  Name">
        </div>
        <div class="form-group">
            <label class="sr-only" for="exampleInputEmail2">Email address</label>
            <input type="email" name="c_email[]" class="form-control" id="c_email_id"  placeholder="Email">
        </div>
        <div class="form-group">
            <label class="sr-only" for="exampleInputEmail2">Phone</label>
            <input type="tel" name="c_phone[]" class="form-control" id="c_phone_number" placeholder="Phone">
        </div>
        <?php
        }
    } } ?>

如何在不改变旧行数据的情况下添加一行？？

Answer 1

而不是做:

$('#contact_form_div').html(data);

这样做:

$('#contact_form_div').append(data);

然后您只需要确保在您的 PHP 上您只返回一个新行。