使用动态创建的文本框 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代码，如下所示：

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

       //other codes

       //add this inside function

        html += '<td id="testid"> <input id="test_id[]" class="form-control" type="text" style="width:200px"  onchange="checkname(this);"> </td>';

     //add class

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

   

       // other code

      });  

 function checkname(el)

    {  

    var test_id = $(el).val();//get that value  

    $.ajax({

        type: 'post',

        url: "adminquery/fetch_test_name.php", // request file the 'check_email.php'

        data: {'test_id': test_id,},

    success: function (data) {

     //get closest tr and find class with .test_name 

      $(el).closest('tr').find('.test_name').val(data);

        }

       });

    //same do for other

     } 

演示代码：

$(document).ready(function() {

  var count = 0;

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

    count++;

    var html = '';

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

    html += '<td id="testid"> <input id="test_id[]" class="form-control" type="text" style="width:200px" onchange="checkname(this);"> </td>';

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

    html += '<td id="amounts">  <input id="amount" type="text" style="min-width:150px" class="form-control"  readonly="" > </td>';

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

    html += '</tr>';

    $('#rows').append(html);

  });

  $(document).on('click', '.remove', function() {

    $(this).closest("#trrows").remove();

  });

});

// fetch test name from database      

function checkname(el) {

  var test_id = $(el).val();

  console.log(test_id)

  $.ajax({

    type: 'post',

    url: "adminquery/fetch_test_name.php", 

    data: {

      'test_id': test_id,

    },

    success: function(data) {

      //get closest tr and find test_name class

      $(el).closest('tr').find('.test_name').val(data);

    }

  });

  //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">

  <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[]" onchange="checkname(this);">

      </td>

      <!--add class here-->

      <td> <input type="text" style="width:300px" class="form-control" class="test_name" 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>