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

Question

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.

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.

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>

Answer 1

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.

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.

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.

First, change

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

to

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

Next, change

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

to

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

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);
  });
});

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.

---

PS as a minor, unrelated point, you can also simplify this line

idf = (idf-1) + 2;

to

idf++;