Question

我创建一个动态表单但是当我得到json结果时它总是将结果传递给第一行我想将所选结果传递给选定行我的动态行如下我做了一个动态表单，但是当我得到json结果时，它总是将结果传递给第一行我想将所选结果传递给选定行我的动态行如下所示我创建一个动态表单，但是当我得到json结果时，它总是将结果传递给第一行我想将所选结果传递给选定行我的动态行如下

这是我的ajax代码：

$(".items").on('change',function() {
var that = $(this);
var url = "http://localhost/QuickBacklog/web/app_dev.php/invoices/invoiceitem";
 $.ajax({
    type: "POST",
    url: url,
    data:{'invoiceitem' : that.find('option:selected').val()},
 }).done(function( result ) {
        var description=(result.description);
        var unitprice=(result.unitprice);
        var quantity=(result.quantity);
        document.getElementById("description").innerHTML = description;
        $("#unitprice").val(+unitprice);
        $("#quantity").val(+quantity); 
 });    
});

我的json结果正确但是当我传递结果时它只将结果传递给#description，＃unitprice，＃quantity not＃description2，＃unitprice2，＃quantity2

这是我的HTML代码：

<select id="items" class="items" style="width:127px; float:left;" name="items">
<option value="1">Clothes</option>
<option value="2">Office Stationery</option>
<option value="3">Furniture</option>
</select>
 <textarea id="description" class="description" style="float:left; display: block; height: 30px; width:209px; border-radius:0px; margin: -1px 1px 0;" name="description">  </textarea>
  <input id="unitprice" class="unitprice" type="text" style="float:left; display: block; height: 30px; width:106px; border-radius:0px; margin: -1px -1px 0;" name="unitprice">
  <input id="quantity" class="quantity" type="text" style="float:left; display: block; height: 30px; width:64px; border-radius:0px; margin: -1px 1px 0;" name="quantity">
  <select id="firsttax" style=" float:left; display: block; height: 31px; width:106px; border-radius:0px; margin: -2px -1px 0;" name="firsttax">
  <select id="secondtax" style="float:left; display: block; height: 31px; width:107px; border-radius:0px; margin: -2px 0px 0;" name="secondtax">

和

<select id="items2" class="items" style="width:127px; float:left;" name="items2">
<option value="1">Clothes</option>
<option value="2">Office Stationery</option>
<option value="3">Furniture</option>
</select>
<textarea id="description2" class="description" style="float:left; display: block; height: 30px; width:209px; border-radius:0px; margin: -1px 1px 0;" name="description2">   </textarea>
<input id="unitprice2" class="unitprice" type="text" style="float:left; display: block; height: 30px; width:106px; border-radius:0px; margin: -1px -1px 0;" name="unitprice2">
<input id="quantity2" class="quantity" type="text" style="float:left; display: block; height: 30px; width:64px; border-radius:0px; margin: -1px 1px 0;" name="quantity2">
<select id="firsttax2" style=" float:left; display: block; height: 31px; width:106px; border-radius:0px; margin: -2px -1px 0;" name="firsttax2">
<select id="secondtax2" style="float:left; display: block; height: 31px; width:107px; border-radius:0px; margin: -2px 0px 0;" name="secondtax2">

Answer 1

使用class而不是id ...

<input type="text" style="float:left; display: block; height: 30px; width:106px; border-radius:0px; margin: -1px -1px 0;" id="unitprice" class="unitprice" name="unitprice">

并在成功函数中使用类选择器

 $(".unitprice").val(+unitprice);

OR

另一种方法是使用^

的属性选择器

$("textarea[id^='description']").val(description);
$('input[id^="unitprice"]').val(unitprice);
$('input[id^="quantity"]').val(quantity);

Answer 2

对于动态生成的字段。

$("body").on('change', '.items', function() {
    var that = $(this);
    var url = "http://localhost/QuickBacklog/web/app_dev.php/invoices/invoiceitem";
     $.ajax({
        type: "POST",
        url: url,
        data:{'invoiceitem' : that.find('option:selected').val()},
     }).done(function( result ) {
            var description=(result.description);
            var unitprice=(result.unitprice);
            var quantity=(result.quantity);
            document.getElementById("description").innerHTML = description;
            $("#unitprice").val(+unitprice);
            $("#quantity").val(+quantity); 
     });    
});

<强>更新

将输入元素放在div容器中，如下所示

<div class='items-container'>
    <select id="items" class="items" style="width:127px; float:left;" name="items">
    <option value="1">Clothes</option>
    <option value="2">Office Stationery</option>
    <option value="3">Furniture</option>
    </select>
     <textarea id="description" class="description" style="float:left; display: block; height: 30px; width:209px; border-radius:0px; margin: -1px 1px 0;" name="description">  </textarea>
      <input id="unitprice" class="unitprice" type="text" style="float:left; display: block; height: 30px; width:106px; border-radius:0px; margin: -1px -1px 0;" name="unitprice">
      <input id="quantity" class="quantity" type="text" style="float:left; display: block; height: 30px; width:64px; border-radius:0px; margin: -1px 1px 0;" name="quantity">
      <select id="firsttax" style=" float:left; display: block; height: 31px; width:106px; border-radius:0px; margin: -2px -1px 0;" name="firsttax">
      <select id="secondtax" style="float:left; display: block; height: 31px; width:107px; border-radius:0px; margin: -2px 0px 0;" name="secondtax">
</div>

而不是这些行

document.getElementById("description").innerHTML = description;
$("#unitprice").val(+unitprice);
$("#quantity").val(+quantity);

将此脚本放在那里。

that.parent().find('.description').val(description)
that.parent().find('.unitprice').val(unitprice)
that.parent().find('.quantity').val(quantity)

希望这会对你有所帮助。

Answer 3

尝试指定选择器。

<div id="container1"><p id="unitprice"></p></div>
<div id="container2" style="display:none;"><p id="unitprice"></p></div>
<div id="container3" style="display:none;"><p id="unitprice"></p></div>

// ...
.done(function(result) {
    var container = $('div:visible');
    container.find('#unitprice').val(result.unitprice);
})

如何将json结果值传递给动态字段？

3 个答案: