0

我是第一次使用 ajax。我有一个动态表单，它在单击“添加按钮”时添加了类似的表单，并且每个表单中都有一个字段“获取数据”，用于从数据库中检索各个字段的数据。问题是“获取数据”不适用于所有领域。

<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');?>

上面的代码是我的代码。请帮我。

4

2 回答 2

1

首先，id元素的属性值必须是唯一的；它是一个标识符，如果您有多个具有相同id. 改用一个类。

现在，当您$('#submit')在 jQuery 代码中执行此操作时，只会选择执行代码时页面上存在的元素。而且，因为它是一个 ID 选择器，所以它最多只能选择一个元素。

如果要将事件处理程序绑定到页面加载后添加的元素，则需要使用事件委托：

$('#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".

于 2013-02-01T13:51:16.587 回答
0 
<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>
于 2013-02-10T13:19:11.597 回答