php - Ajax PHP を使用した動的フォーム

Question

私は初めてajaxに取り組んでいます。「ボタンの追加」をクリックすると同様のフォームを追加する動的フォームが1つあり、各フォームには「データの取得」フィールドがあり、個々のフィールドのデータベースからデータを取得するために使用されます。問題は、すべてのフィールドで「データの取得」が機能しないことです。

<style>
        td {
            border: solid 1px lightGrey;
            padding: 0 4px 0 4px;
        }
    </style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>


    <script type="text/javascript">
var count = 0;
$(document).ready(function(){

 $.ajaxSetup ({
                cache: false
            });
                       var loadUrl = "ajaxfunc.php";
            $("#submit").click(function(){
 count += 1;
   $("#result").load(loadUrl,{name:document.getElementById('fields'+count).value},function(responseText){


                });


            });




$(function(){
    $('p#addField').click(function(){
        count += 1;
        $('#fields1').append(
        '<div id="fields">'
                +'<table border="0">'
                        +'<tr>'
                            +'<td width="100">'
                                +'ISBN NO :'
                            +'</td>'
                            +'<td>'
                            +'  <input type="text" id="cIsbn1" name="cIsbn[]"  />'
                            +'</td>'
                            +'<td>'
                                +'<button name="submitit" id="submit' + count + '" type="button" class="btn "  style="float:left;">Get Data</button>'
                            +'</td>'
                        +'</tr>'
                        +'<tr>'
                            +'<td> Book Name:</td>'
                            +'<td> <input type="text" id="bookName' + count + '" name="bookName[]" style="width:200px;"  /> </td>'
                            +'<td> Price : </td>'
                            +'<td> RM<input type="text" id="price' + count + '" name="price[]"  style="width:50px;"/>'
                                +'&nbsp;$<input type="text" id="other_price' + count + '" name="other_price[]"  style="width:50px;" readonly="readonly"/>   </td>'
                        +'</tr>'
                        +'<tr>'
                            +'<td> Quantity :</td>'
                            +'<td><input type="text" id="quantity' + count + '" name="quantity[]" /></td>'
                            +'<td> Discount (in %): </td>'
                            +'<td> <input type="text" id="discount' + count + '" name="discount[]"  /></td>'                        
                        +'</tr>'
                        +'<tr>'
                            +'<td>'
                                +'Net Price :'
                            +'</td>'
                            +'<td>'
                                +'<input type="text" id="netPrice' + count + '" name="netPrice[]" />'
                            +'</td>'
                        +'</tr>'
                        +'<tr>'
                            +'<td>'
                                +'Remarks :'
                            +'</td>'
                            +'<td style="height:45px;">'
                                +'<textarea id="ind_remarks' + count + '" name="ind_remarks[]" style="resize:none; position:absolute;"></textarea>'
                            +'</td>'

                        +'</tr>'

                                   +'</div>'

                    +'</table><hr>'
                    +'</div>');





    });

});});
</script>
        <div id="contentWrapper">
        <?php include('includes/sidebar_left.php');?>

        <div class="content">

                <h2>Add New Customer & Issue Quotation</h2>
                <hr />
                <form id="newBook" action="newBookProcess.php" method="post" enctype="multipart/form-data">

                <table border="0">
                        <tr>
                        <td width="152">Customer Name *</td>
                        <td width="231">:
                                <input class="validate[required] text-input" type="text" name="cName" /></td>
                        <td width="272" rowspan="6"><p>Remarks:</p>
                                <p>
                                <textarea name="remarks" rows="7" cols="33" style="resize:none;"></textarea>
                            </p></td>
                    </tr>
                        <tr>
                        <td>Address</td>
                        <td> :
                                <input type="text" name="cAddress1" /><br />
                                : <input type="text" name="cAddress2" /></td>
                    </tr>
                        <tr>
                        <td>Telephone </td>
                        <td>:
                                <input type="text" name="cTelephone" /></td>
                    </tr>
                        <tr>
                        <td>Fax</td>
                        <td>:
                                <input type="text" name="cFax" /></td>
                    </tr>


                    </table>
                <hr />
                <p style="width:100%;">
                <h2 style="font-size:16px;">Add Book To Quotation </h2>

                <p id="addField" style="border:none; background:none; width:100%;cursor:pointer; right:0; float:right;"><img src="images/addNew.png" width="100" style="border:none;"/> <p>

                <hr />
                </p>
                <div id="fields1">

                    <table border="0">
                        <tr>
                            <td width="100">
                                ISBN NO :
                            </td>
                            <td>
                                <input type="text" name="cIsbn[]" id="cIsbn"  />
                            </td>
                            <td>
                                <button name="submitit" id="submit2" type="button" class="btn "  style="float:left;">Get Data</button>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Book Name:
                            </td>
                            <td>
                                <input type="text" name="bookName[]" style="width:200px;"  />
                            </td>
                            <td>
                                Price :
                            </td>
                            <td>
                                RM<input type="text" name="price[]"  style="width:50px;"/>
                                &nbsp;$<input type="text" name="other_price[]"  style="width:50px;" readonly/>

                            </td>
                        </tr>
                        <tr>
                            <td>
                                Quantity :
                            </td>
                            <td>
                                <input type="text" name="quantity[]" />
                            </td>
                            <td>
                                Discount (in %):
                            </td>
                            <td>
                                <input type="text" name="discount[]"  />
                            </td>

                        </tr>
                        <tr>
                            <td>
                                Net Price :
                            </td>
                            <td>
                                <input type="text" name="netPrice[]" />
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Remarks :
                            </td>
                            <td style="height:45px;">
                                <textarea name="ind_remarks[]" style="resize:none; position:absolute;"></textarea>
                            </td>
                            <td>
                                <button id="addField">Add New </button>
                            </td>
                        </tr>
                    </table> 
                <hr />
                </div>

                <p>
                        <input type="submit" value="Add Book" style="cursor:pointer;" />
                        <input type="reset" style="cursor:pointer;" /> <span class="req">* required fileds</span>
                    </p>
            </form>
            <div id="result" style="overflow:hidden;" >

                                    </div>
            </div>
    </div>
    </div>
<?php include('includes/footer.php');?>

上記のコードは私のコードです。私を助けてください。

Answer 1

まず、id要素の属性の値は一意でなければなりません。これは識別子です。同じ を持つ複数の要素がある場合、特定の要素を一意に識別することはできませんid。代わりにクラスを使用してください。

ここで、$('#submit')jQuery コードで行うと、コードが実行された時点でページに存在する要素のみが選択されます。また、これは ID セレクターであるため、多くても 1 つの要素しか選択しません。

ページの読み込み後に追加される要素にイベント ハンドラーをバインドする場合は、イベント デリゲーションを使用する必要があります。

$('#fields1').on('click', '.submit-button', function(e) {
    count += 1;
    $("#result").load(loadUrl,{name:document.getElementById('fields'+count).value});
});

空のコールバック関数を削除したことに注意してください。内部で何もし​​たくない場合は、渡す必要はありません。これはオプションの引数です。;.submit-buttonへの呼び出しのセレクターとしても使用しました。.on()を使用するのではなく、それを想定していid="submit"ますclass="submit-button"。

Answer 2

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){

 $.ajaxSetup ({
                cache: false
            });
             var loadUrl = "ajaxfunc.php";
            var count=1

            $("button").live('click', function(){
   $("#result").load(loadUrl,{name:document.getElementById('fname1').value, email:document.getElementById('mytext').value, id:document.getElementById('id'+count).value },function(responseText){

                count=count+1;
                });


            });

});

 $(document).ready(function(){


    var i = $('input').size() + 1;
     var count=1
    $('#add').click(function() {
        $('<div><input type="text" id="fname'+count+'"   /><input type="text" id="id'+count+'"  /><button  id="submit'+count+'" type="button"  style="float:left;">Submit'+count+'</button><div id="result" style="font-size:0px;width:30px;overflow:hidden;" ></div></div>').fadeIn('slow').appendTo('#form');
       var bj = count;
        count = count+1;

      var test = bj;
document.getElementById("mytext").value = test;

    });

});
function printIt(){
   var sj = document.getElementById('mytext').value;
   alert(sj);

}
</script>

</script>
<a href="#" id="add">Add </a>
<form id="contact" action="" method="post" enctype="multipart/form-data" >

<div id="form"></div>



                        <div id="printHere"></div>
                        <input type="hidden" name="countC" id="mytext" />
        <input type=button value="Get Value" onclick="printIt()" />

</form>