динамическое заполнение формы 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" в качестве идентификатора для множества элементов.Но идентификаторы должны быть уникальными.Когда вы запускаете document.getElementById('items_id') (который может возвращать только один элемент), код не может узнать, на какой из нескольких элементов с тем идентификатором вы на самом деле ссылаетесь.

Теперь, насколько я понимаю, вы хотитеиметь связь между выбором и окном ввода рядом с ним.Значение select должно влиять на значение поля ввода, кажется.Поэтому вам необходимо определить правильное поле ввода, которое относится к селекту, значение которого было изменено.

Есть много способов сделать это, но один простой способ - установить атрибут данных на<select, содержащий уникальный идентификатор строки (для этого вы можете использовать idf).Затем вы устанавливаете то же значение, что и id соответствующего поля ввода.Затем, когда происходит событие «change», вы можете получить атрибут data из select, который вызвал событие, и использовать его для выбора правильного идентификатора ввода для обновления.

Я также использовал больше синтаксиса 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[]' />";

, а затем замените всю функцию «автозаполнение ()» этим обработчиком событий:

$(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 (и / или что он только когда-либо возвращает один элемент, несмотря на то, чтомассив).Если это не правильно, пожалуйста, проясните ситуацию с этими данными - для сервера странно возвращать массив, если в действительности вы запрашиваете информацию только об одном элементе.Было бы логичнее вместо этого просто вернуть один объект.

---

PS как второстепенную, не связанную точку, вы также можете упростить эту строку

idf = (idf-1) + 2;

до

idf++;