dynamicly added row cannot run autofill ajax script

Question

i am new to programming. so i want to make a table that user can add new rows by clicking a button. and in that rows, user can input one fields (ID) with some registered series of numbers and then the other fields (parts name) shows the part's name according my other table. I managed to create a code that works on adding new rows and autofill via ajax.

but unfortunately, the autofill only works on top/first row. but when i input ID on second or third row, the parts name's field did not show up.

what am i missing? this is my add row code:

 <script>
var no = 0;
function addItem() {
    no++;
    var html = "<tr>";
        html += "<td>" + no + "</td>";
        html += "<td><input type='text' name='id_sap[]' onkeyup='autofills()' id='sappart' required></td>";
        html += "<td><input type='text' name='material_name[]' id='namapart' required></td>";
        html += "<td><input type='number' name='outcoming_qty[]' required /></td>";
        html += "<td><button type='button' onclick='deleteRow(this);'>Delete</button></td>"
    html += "</tr>";
    var row = document.getElementById("tbody").insertRow();
    row.innerHTML = html;
    }

    function deleteRow(button) {
        button.parentElement.parentElement.remove();
        // first parentElement will be td and second will be tr.
</script>

and this is my autofill code:

<script type="text/javascript">
        function autofills(){
            var parts = $('input[name="id_sap[]"]').val();
            var sloc = $('input[name="tarea"]').val();
            $.ajax({
                url: 'ajax1.php',
                data: {"id_sap":parts,"storage_location":sloc},
            }).success(function (data) {
                var json = data,
                obj = JSON.parse(json);
                $('input[name="material_name[]"]').val(obj.material_name);
            });
        }
    </script>

and this is my ajax page:

 <?php

//membuat koneksi ke database
$koneksi = mysqli_connect("localhost", "shaun", "godbless19", "dboptima");

//variabel nim yang dikirimkan form.php
$nomorsap = $_GET['id_sap'];
$areas = $_GET['storage_location'];

//mengambil data
$query = mysqli_query($koneksi, "SELECT *  FROM material_card where id_sap = '$nomorsap' and storage_location = '$areas'");
$spare = mysqli_fetch_array($query);
$data = array(

            'material_name'      =>  $spare['material_name']);


//tampil data
echo json_encode($data);
?>

please help me , i have been wasting too much effort and time to solve this so far i keep looking similar issues on stack overflow, none of them seems to work. thank you very much

best regards

**Warning:** You are wide open to [SQL Injections](https://php.net/manual/en/security.database.sql-injection.php) and should use parameterized **prepared statements** instead of manually building your queries. They are provided by [PDO](https://php.net/manual/pdo.prepared-statements.php) or by [MySQLi](https://php.net/manual/mysqli.quickstart.prepared-statements.php). Never trust any kind of input! Even when your queries are executed only by trusted users, [you are still in risk of corrupting your data](http://bobby-tables.com/). [Escaping is not enough!](https://stackoverflow.com/q/5741187) — Dharman, Aug 31 '21 at 15:45

score 1 · Answer 1 · answered Aug 31 '21 at 15:48

Try the following:

$(document).on('keyup', "#sappart input[type='text']", function() {
  var parts = $('input[name="id_sap[]"]').val();
  var sloc = $('input[name="tarea"]').val();
  $.ajax({
    url: 'ajax1.php',
    data: {
      "id_sap": parts,
      "storage_location": sloc
    },
  }).success(function(data) {
    var json = data,
      obj = JSON.parse(json);
    $('input[name="material_name[]"]').val(obj.material_name);
  });
});

dynamicly added row cannot run autofill ajax script

1 Answers1