1

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

例如：

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

name1 email1 phone1
name2 email2 phone2

现在为了添加一个更多的联系人字段，我使用了+1botton。当我点击它时，我得到：

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>

联系表格.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
        }
    } } ?>

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

4

4 回答 4

3

而不是这样做：

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

做这个：

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

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

于 2013-08-28T23:38:35.397 回答
3

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

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

于 2013-08-28T23:40:36.603 回答
0

不要在每次请求时都要求提供完整的表格。当您加载页面时，保留您现在必须执行表单的第一次加载的页面。

然后，制作一个输出单行结果的 php 页面，像您所做的那样通过 ajax 请求它，然后将结果附加到页面的当前 html 中。

于 2013-08-28T23:41:04.143 回答
0

替换这个：

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

有了这个 ：

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

您只需要附加它而不是替换它。希望它有帮助:)

于 2013-08-28T23:55:10.853 回答