Get correct values from Mysql database using dynamically created text boxes PHP and Ajax

Question

In my application just I am trying to get data from MYSQL database and set into text_name and amount text boxes by dynamically created text boxes.

As I first dynamically created text box, it retrieve the data according to the Test_ID (test_id text box) is correctly work, but in the next dynamically created text box, just it does not show the data according to the Test_ID, but in console it retrieve the data according to the previously added Test_ID, does not fetch the data of currently added

Here the HTML code

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

Here is the Ajax code

 $(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" onblur="checkname();" onkeyup="checkname();" onchange="checkname();"> </td>';
    html += '<td id="testname"> <input id="test_name"  type="text" style="width:300px" class="form-control "  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()
    {
    
    var test_id = document.getElementById("test_id[]").value;
    
    $.ajax({
        type: 'post',
        url: "adminquery/fetch_test_name.php", // request file the 'check_email.php'
        data: {'test_id': test_id,},
    success: function (data) {
      $("#test_name").val(data);
        }
       });
    
    // fetch amount from database    
    var testid = document.getElementById("test_id[]").value;
    
    $.ajax({
        type: 'post',
        url: "adminquery/fetch_test_name.php", // request file the 'check_email.php'
        data: {'testid': testid, },
    success: function (data) {
    $("#amount").val(data);
    
    }
    });
             
    }

Really I am appreciating if someone can help me. Thank you.

Swati · Accepted Answer · 2020-09-13 12:46:18Z

This is happening because you are getting value of the element using id which will give you first input value with same id .Instead while append new pass this inside function which will refer to current element which is changed .

So , change your jquery code like below :

    $(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
     }

Demo Code :

$(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>

Collectives™ on Stack Overflow

Get correct values from Mysql database using dynamically created text boxes PHP and Ajax

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related