1

最近、私は連絡先モジュールに取り組んでいます.3つの列があります。name、email、phoneおよび+1ajax を使用してフィールドされたもう 1 つの連絡先を追加するための新しい行を含むボタン。そして、ここで問題が発生します。構造を更新すると、古い連絡先フィールドのデータが消えます。

例えば：

2 行を入力し、name1、email1 などのデータを入力しました。

name1 email1 phone1
name2 email2 phone2

ここで、連絡先をもう 1 つ追加するために、+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>

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

古い行データを変更せずに行を追加するにはどうすればよいですか??

4

4 に答える 4

3

代わりに：

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

これを行う：

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

次に、PHP で新しい行を 1 つだけ返すことを確認する必要があります。

于 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 に答える