Question

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

自动填充下拉列表仅出现在第一个输入上。如何使所有动态表单输入与自动填充一起使用？例如，我有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上设置包含该行的唯一标识符的数据属性（您可以使用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数组中第一项数据的库存值（和/或只返回一项），尽管是数组）。如果那是不正确的，那么请使用此数据说明情况-实际上，如果您仅要求提供有关一项的信息，则服务器返回数组似乎很奇怪。如果只返回一个对象，则更合乎逻辑。

P.S。作为次要的，无关的点，您还可以简化此行

idf = (idf-1) + 2;

到

idf++;

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

1 个答案: