javascript - 动态 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 相同的值相关的输入框。然后当“更改”事件发生时，您可以从触发事件的选择中获取数据属性，并使用它来选择要更新的正确输入 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 中第一项数据的股票值(value)数组(和/或它只返回一个项目，尽管它是一个数组)。如果这不正确，那么请澄清此数据的情况 - 如果实际上您只询问有关一项的信息，那么服务器返回一个数组似乎很奇怪。它只返回一个对象会更合乎逻辑。

---

附言作为一个无关紧要的小点，你也可以简化这一行

idf = (idf-1) + 2;

到

idf++;