动态ajax表单选择框自动填充 [英] dynamic ajax form select box autofill

问题描述

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

I'm strugglin to make a PHP Form with Dynamic Fields with Auto Fill other fields in JQuery, so far I can add new fields and the autofill works just fine but only for the first field.

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

The autofill drop down only appears on the first input. How can I make all dynamic form input work with the autofill? For example I have 2 fields. Items_name and Total_stock in dynamic form. I want to if I select Items_name. Autofill for field total_stock.

这是我的Ajax代码:

Here is my ajax code :

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

推荐答案

问题是您将"items_id"重新用作许多元素的ID.但是ID必须是唯一的.当您运行document.getElementById('items_id')(只能返回一个元素)时，代码将无法知道您实际上是在引用具有该ID的多个元素中的哪个.

The problem is that you're re-using "items_id" as the ID for lots of elements. But IDs must be unique. When you run document.getElementById('items_id') (which can only return one element) the code has no way to know which of the multiple elements with that ID you're actually referring to.

现在，据我了解，您希望选择和旁边的输入框之间具有某种关系.看来，选择的值必须影响输入框的值.因此，您需要一种方法来识别与值已更改的选择有关的正确输入框.

Now, as I understand it you want to have a relationship between the select and the input box next to it. The value of the select must affect the value of the input box, it seems. Therefore you a way need to identify the correct input box which relates to the select whose value has been changed.

您可以通过多种方法来执行此操作，但是一种简单的方法是在<select上设置包含该行的唯一标识符的数据属性(您可以使用idf).然后，您设置与相关输入框的id相同的值.然后，当发生更改"事件时，您可以从触发该事件的选择中获取数据属性，并使用它来选择要更新的正确输入ID.

There are many ways you could do this, but one simple way way is to set a data-attribute on the <select containing the unique identifier of the row (you can use idf for this). You then set the same value as the id of the related input box. Then when the "change" event happens, you can get the data-attribute from the select which triggered the event, and use it to select the correct input ID to update.

我还为此使用了更多的jQuery语法，因为您获得了不显眼的事件处理，而且语法也更简短-在这种情况下它很好用.

I've also used more jQuery syntax for this, since you get unobtrusive event handling, and also the syntax is a bit briefer - it works nicely for this scenario.

首先，更改

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()"函数:

And then replace the whole "autofill()" function with this event handler:

$(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数组中第一项数据的存货价值(和/或尽管有回报，但它只返回一项)是一个数组).如果那是不正确的，那么请使用此数据说明情况-实际上，如果您仅要求提供有关一项的信息，则服务器返回数组似乎很奇怪.如果只返回一个对象，则更合乎逻辑.

I have made the assumption here (pending a comment from you) that we only ever want to use the stock value from first item of data in the hasil array (and/or that it only ever returns one item, despite being an array). If that's not correct then please clarify the situation with this data - it seems odd for the server to return an array if, in reality, you are only asking for information about one item. It would be more logical for it to just return a single object instead.

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

P.S. as a minor, unrelated point, you can also simplify this line

idf = (idf-1) + 2;

到

idf++;

这篇关于动态ajax表单选择框自动填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！