动态 ajax 表单 select 框自动填充

Question

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

自动填充下拉列表仅出现在第一个输入中。如何使所有动态表单输入与自动填充一起使用？例如我有 2 个字段。 Items_name 和 Total_stock 动态形式。如果我 select 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')（只能 return 一个元素）时，代码无法知道您实际指的是具有该 ID 的多个元素中的哪一个。

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

有很多方法可以做到这一点，但一种简单的方法是在 <select 上设置一个数据属性，其中包含行的唯一标识符（您可以使用 idf这个）。然后设置与相关输入框的 id 相同的值。然后当"change"事件发生时，你可以从触发事件的select中获取数据属性，并用它来select更新正确的输入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 数组中第一项数据的股票价值（and/or 它只曾经 return 有一个项目，尽管它是一个数组）。如果这不正确，那么请用这些数据澄清情况 - 如果实际上您只询问关于一个项目的信息，那么服务器 return 数组似乎很奇怪。只 return 一个对象会更合乎逻辑。

P.S。作为一个无关紧要的小点，你也可以简化这一行

idf = (idf-1) + 2;

至

idf++;

动态 ajax 表单 select 框自动填充

dynamic ajax form select box autofill

html

javascript

ajax

jquery

dynamic-html