Question

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

例如：

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

name1 email1 phone1
name2 email2 phone2

现在为了添加一个联系人，我使用了+1 botton。我一点击就得到：

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上确保你只返回一个新行。

Answer 2

不是替换当前表单，而是附加PHP脚本生成的新行。因此，您需要使用$('#contact_form_div').append(data);代替$('#contact_form_div').html(data);。

更改后，可以使用num参数指定要添加的行数。

Answer 3

不要在每个请求上要求整个表格。当你加载页面时，保持你现在拥有的页面首次加载表单。

然后，创建一个输出单行结果的php页面，按照你的方式通过ajax请求它，然后append将结果发送到页面的当前html。< / p>

Answer 4

替换这个：

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

用这个：

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

你只需要附加它就不要替换它。希望它有所帮助：）

如何使用ajax更新表单结构

4 个答案: