动态ajax表单选择框自动填充

Question

我正在努力制作一个带有动态字段的 PHP 表单，并在 JQuery 中自动填充其他字段，到目前为止，我可以添加新字段并且自动填充工作得很好，但仅适用于第一个字段。

自动填充下拉菜单仅出现在第一个输入上。 如何使所有动态表单输入与自动填充一起使用？ 例如，我有 2 个字段。动态形式的 Items_name 和 Total_stock。如果我选择 Items_name，我想这样做。字段 total_stock 的自动填充。

这是我的 ajax 代码：

<script language="javascript">
    function AddMasterDetail() {
            var idf = document.getElementById("idf").value;
            stre="<div class='form-group'  id='srow" + idf + "'><div class='controls'>";

            stre=stre+" <div class='col-xs-2'>";
            stre=stre+"<select placeholder='Items Name' class='form-control input-sm' name='items_id[]' id='items_id' onchange='return autofill();'>"
                        +"<option value='' disabled selected>Please Select</option>"
                        +"<?php foreach($v_items_stock as $row){ echo "<option value='$row->items_id'>$row->items_name</option>"; } ?></select>";
            stre=stre+"</div>";

            stre=stre+"<div class='col-xs-2'>";
            stre=stre+"<input class='form-control input-sm' id='total_stock' placeholder='Total Stock'  name='total_stock[]' />";
            stre=stre+"</div>";         


            stre=stre+"<div class='col-xs-1'> <button type='button' class='btn btn-danger btn-sm' title='Hapus Rincian !' onclick='removeFormField(\"#srow" + idf + "\"); return false;'><i class='glyphicon glyphicon-remove'></i></button></div>";

            $("#divItems").append(stre);    
            idf = (idf-1) + 2;
            document.getElementById("idf").value = idf;
        }
    function removeFormField(idf) {
            $(idf).remove();
        }

    function autofill(){
        var items_id = document.getElementById('items_id').value;
        $.ajax({
               url:"<?php echo base_url();?>transaction_sending/cari",
               data:'&items_id='+items_id,
               success:function(data){
               var hasil = JSON.parse(data);  

        $.each(hasil, function(key,val){ 

        document.getElementById('items_id').value=val.items_id;
               document.getElementById('total_stock').value=val.total_stock;


            });
        }
               });
    }   

</script>

Answer 1

问题是您正在重新使用“items_id”作为许多元素的 ID。但 ID 必须是唯一的。当您运行 document.getElementById('items_id')（它只能返回一个元素）时，代码无法知道您实际指的是具有该 ID 的多个元素中的哪一个。

现在，据我了解，您希望在选择和旁边的输入框之间建立关系。看来select的值一定会影响输入框的值。因此，您需要一种方法来识别与值已更改的选择相关的正确输入框。

有很多方法可以做到这一点，但一种简单的方法是在包含行的唯一标识符的<select 上设置一个数据属性（您可以为此使用idf）。然后设置与相关输入框的id 相同的值。然后当“change”事件发生时，你可以从触发事件的select中获取data-attribute，并使用它来选择正确的输入ID进行更新。

我还为此使用了更多的 jQuery 语法，因为您可以获得不显眼的事件处理，而且语法更简洁 - 它非常适合这种情况。

首先，改变

stre=stre+"<select placeholder='Items Name' class='form-control input-sm' name='items_id[]' id='items_id' onchange='return autofill();'>"

到

stre=stre+"<select placeholder='Items Name' class='form-control input-sm autofill' name='items_id[]' id='items_id_" + idf + "' data-idf='" + idf + "' >"

接下来，改变

stre=stre+"<input class='form-control input-sm' id='total_stock' placeholder='Total Stock'  name='total_stock[]' />";

到

stre=stre+"<input class='form-control input-sm' id='total_stock_" + idf + "' placeholder='Total Stock'  name='total_stock[]' />";

然后用这个事件处理程序替换整个“autofill()”函数：

$(document).on("change", ".autofill", function(e) {
  var select = $(this);
  var item_id = select.val();
  var idf = select.data("idf");

  $.ajax({
    url:"<?php echo base_url();?>transaction_sending/cari",
    method: "GET",
    data: { items_id: item_id },
    dataType: "json"
  }).done(function(hasil) {
    $("#total_stock_" + idf).val(hasil[0].total_stock);
  });
});

我在这里做了假设（等待您发表评论），我们只想使用 hasil 数组中第一项数据中的股票值（和/或它只返回一个项目，尽管是一个数组）。如果这不正确，那么请用这些数据澄清情况 - 如果实际上您只是询问有关一项的信息，那么服务器返回一个数组似乎很奇怪。只返回一个对象会更合乎逻辑。

---

附：作为一个次要的，不相关的点，您还可以简化这一行

idf = (idf-1) + 2;

到

idf++;