使用动态创建的文本框 PHP 和 Ajax 从 Mysql 数据库获取正确的值

Question

在我的应用程序中，我试图data从MYSQL数据库中获取数据并设置text_name为amount text boxes动态创建的文本框。

当我第一次动态创建时，text box它data根据 检索数据Test_ID (test_id text box)是正确的工作，但是在下一个动态创建中text box，只是它不显示data根据Test_ID，但在控制台中它根据之前添加的检索数据Test_ID，不目前已添加fetchdata

这是HTML代码

<table class="table table-hover table-white">

   <thead>

     <tr>

        <th class="col-sm-1">Test ID</th>

        <th class="col-md-6">Test Name</th>

        <th style="width:100px;">Amount</th>

        <th> Action</th>

     </tr>

   </thead>

   <tbody id="rows">

     <tr>

        <td> <input class="form-control" type="text" style="width:200px" id="test_id[]" onblur="checkname();" onkeyup="checkname();" onchange="checkname();">

        </td>

        <td> <input  type="text" style="width:300px" class="form-control"  readonly="" id="test_name"  onblur="checkname();" onkeyup="checkname();" onchange="checkname();">

        </td>

        <td> <input  type="text" style="min-width:100px" class="form-control" readonly="" id="amount">

        </td>

        <td><center> <a href="javascript:void(0)" class="text-success font-18" title="Add" id="add"><i class="fa fa-plus"></i></a> </center> </td>

      </tr>

   </tbody>

</table>

这是Ajax代码

 $(document).ready(function(){

        

    var count=0;

    $(document).on('click','#add',function() {

    count++; 

    

    var html= '';

    html += '<tr id="trrows">';

    如果有人能帮助我，我真的很感激。谢谢。

Answer 1

发生这种情况是因为您正在获取元素的值，使用id该值将为您提供具有相同 id 的第一个输入值。相反，在函数内附加新的传递值时this，该函数将引用已更改的当前元素。因此，更改您的jquery代码，如下所示：&nbsp; &nbsp; $(document).on('click','#add',function() {&nbsp; &nbsp; &nbsp; &nbsp;//other codes&nbsp; &nbsp; &nbsp; &nbsp;//add this inside function&nbsp; &nbsp; &nbsp; &nbsp; html += '<td id="testid"> <input id="test_id[]" class="form-control" type="text" style="width:200px"&nbsp; onchange="checkname(this);"> </td>';&nbsp; &nbsp; &nbsp;//add class&nbsp; &nbsp; &nbsp; html += '<td id="testname"> <input id="test_name" class="test_name" type="text" style="width:300px" class="form-control "&nbsp; readonly="" onblur="checkname();" onkeyup="checkname();" onchange="checkname();"> </td>';&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;// other code&nbsp; &nbsp; &nbsp; });&nbsp;&nbsp;&nbsp;function checkname(el)&nbsp; &nbsp; {&nbsp;&nbsp;&nbsp; &nbsp; var test_id = $(el).val();//get that value&nbsp;&nbsp;&nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; type: 'post',&nbsp; &nbsp; &nbsp; &nbsp; url: "adminquery/fetch_test_name.php", // request file the 'check_email.php'&nbsp; &nbsp; &nbsp; &nbsp; data: {'test_id': test_id,},&nbsp; &nbsp; success: function (data) {&nbsp; &nbsp; &nbsp;//get closest tr and find class with .test_name&nbsp;&nbsp; &nbsp; &nbsp; $(el).closest('tr').find('.test_name').val(data);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp;});&nbsp; &nbsp; //same do for other&nbsp; &nbsp; &nbsp;}&nbsp;演示代码：$(document).ready(function() {&nbsp; var count = 0;&nbsp; $(document).on('click', '#add', function() {&nbsp; &nbsp; count++;&nbsp; &nbsp; var html = '';&nbsp; &nbsp; html += '<tr id="trrows">';&nbsp; &nbsp; html += '<td id="testid"> <input id="test_id[]" class="form-control" type="text" style="width:200px" onchange="checkname(this);"> </td>';&nbsp; &nbsp; html += '<td id="testname"> <input id="test_name"&nbsp; type="text" style="width:300px" class="form-control test_name"&nbsp; readonly="" onblur="checkname();" onkeyup="checkname();" onchange="checkname();"> </td>';&nbsp; &nbsp; html += '<td id="amounts">&nbsp; <input id="amount" type="text" style="min-width:150px" class="form-control"&nbsp; readonly="" > </td>';&nbsp; &nbsp; html += '<td><center> <a href="javascript:void(0)" class="text-danger font-18 remove" title="Remove" id="remove"><i class="fa fa-trash-o">-</i></a></center> </td>';&nbsp; &nbsp; html += '</tr>';&nbsp; &nbsp; $('#rows').append(html);&nbsp; });&nbsp; $(document).on('click', '.remove', function() {&nbsp; &nbsp; $(this).closest("#trrows").remove();&nbsp; });});// fetch test name from database&nbsp; &nbsp; &nbsp;&nbsp;function checkname(el) {&nbsp; var test_id = $(el).val();&nbsp; console.log(test_id)&nbsp; $.ajax({&nbsp; &nbsp; type: 'post',&nbsp; &nbsp; url: "adminquery/fetch_test_name.php",&nbsp;&nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; 'test_id': test_id,&nbsp; &nbsp; },&nbsp; &nbsp; success: function(data) {&nbsp; &nbsp; &nbsp; //get closest tr and find test_name class&nbsp; &nbsp; &nbsp; $(el).closest('tr').find('.test_name').val(data);&nbsp; &nbsp; }&nbsp; });&nbsp; //do same for othere input..}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><table class="table table-hover table-white">&nbsp; <thead>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <th class="col-sm-1">Test ID</th>&nbsp; &nbsp; &nbsp; <th class="col-md-6">Test Name</th>&nbsp; &nbsp; &nbsp; <th style="width:100px;">Amount</th>&nbsp; &nbsp; &nbsp; <th> Action</th>&nbsp; &nbsp; </tr>&nbsp; </thead>&nbsp; <tbody id="rows">&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td> <input class="form-control" type="text" style="width:200px" id="test_id[]" onchange="checkname(this);">&nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; <!--add class here-->&nbsp; &nbsp; &nbsp; <td> <input type="text" style="width:300px" class="form-control" class="test_name" readonly="" id="test_name" onblur="checkname();" onkeyup="checkname();" onchange="checkname();">&nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; <td> <input type="text" style="min-width:100px" class="form-control" readonly="" id="amount">&nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; <center> <a href="javascript:void(0)" class="text-success font-18" title="Add" id="add"><i class="fa fa-plus">+</i></a> </center>&nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; </tr>&nbsp; </tbody></table>