将 AJAX 数据放入具有相同 ID 的输入字段中

ajax data into input fields with same id

本文关键字：ID 输入 字段 数据 AJAX      更新时间：2023-09-26

我需要将ajax数据添加到具有相同ID的输入字段中。 可以通过单击添加新行按钮。使用相同的 ID 和类生成的所有行。我正在尝试将 Ajax 数据添加到每行更改第一个选择框的文本字段中。如何仅为更改的行设置数据。

动态表单 

<tr>
    <td>
        <select class="form-control itemId" id="itemId" required="required" name="item_id[]">
            <option value="" selected="selected">Select an item</option><option value="1">Toyota Front Buffer</option>
            <option value="2">Mitsubishi Lancer Right Door</option>
        </select>
    </td>
    <td>
        <input class="form-control item_description" id="item_description" placeholder="Not Required | Optional" name="item_description[]" type="text">
    </td>
    <td>
        <input class="form-control" placeholder="Add Units" id="units" required="required" name="units[]" type="text">
    </td>
    <td>
        <input class="form-control" placeholder="Add Rate" id="rate" required="required" name="rate[]" type="text">
    </td>
    <td>
        <input class="form-control" id="amount" placeholder="Add Hrs and Rate" name="amount[]" type="text">
    </td>
</tr>
<tr>
    <td>
        <select class="form-control itemId" id="itemId" required="required" name="item_id[]">
            <option value="" selected="selected">Select an item</option><option value="1">Toyota Front Buffer</option>
            <option value="2">Mitsubishi Lancer Right Door</option>
        </select>
    </td>
    <td>
        <input class="form-control item_description" id="item_description" placeholder="Not Required | Optional" name="item_description[]" type="text">
    </td>
    <td>
        <input class="form-control" placeholder="Add Units" id="units" required="required" name="units[]" type="text">
    </td>
    <td>
        <input class="form-control" placeholder="Add Rate" id="rate" required="required" name="rate[]" type="text">
    </td>
    <td>
        <input class="form-control" id="amount" placeholder="Add Hrs and Rate" name="amount[]" type="text">
    </td>
</tr>

阿贾克斯代码

$("#dynamic-tbl").on('change', 'select', function(e){
    var item_id = e.target.value;
    var self = this;
    $.get('/ajax-item?item_id=' + item_id, function(data){
        $.each(data, function(index, itemObj){
            $(this).closest('#item_description').val(itemObj.name);
            $(this).closest('#rate').val(itemObj.sale_price);
        });
    });
});

试试这个。

$.each(data, function(index, itemObj){
     $(self) // use self not this
         .closest('tr') // get the parent(closest) tr
         .find('input[name="item_description[]"]')// now find the item_description by name as id must be unique
         .val(itemObj.name);
     $(self)
         .closest('tr')
         .find('input[name="rate[]"]')
         .val(itemObj.sale_price);
});
相关文章：