动态添加的行无法运行自动填充 ajax 脚本

Posted 2023-03-25

【中文标题】动态添加的行无法运行自动填充 ajax 脚本

【英文标题】：dynamicly added row cannot run autofill ajax script

【发布时间】：2021-10-30 04:19:15

【问题描述】：

我是编程新手。所以我想制作一个表格，用户可以通过单击按钮添加新行。 在该行中，用户可以输入一个字段（ID）和一些注册的数字系列，然后其他字段（零件名称）根据我的另一个表格显示零件的名称。 我设法创建了一个代码，用于通过 ajax 添加新行和自动填充。

但不幸的是，自动填充仅适用于顶部/第一行。但是当我在第二行或第三行输入 ID 时，零件名称的字段没有显示出来。

我错过了什么？这是我的添加行代码：

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

这是我的自动填充代码：

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

这是我的 ajax 页面：

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

请帮帮我，我一直在浪费太多精力和时间来解决这个问题 到目前为止，我一直在寻找有关堆栈溢出的类似问题，但似乎都不起作用。 非常感谢

最好的问候

【问题讨论】：

警告：您对SQL Injections 持开放态度，应该使用参数化的prepared statements，而不是手动构建查询。它们由PDO 或MySQLi 提供。永远不要相信任何形式的输入！即使您的查询仅由受信任的用户执行，you are still in risk of corrupting your data。 Escaping is not enough!

【参考方案1】：

尝试以下方法：

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