Ajax自动填充动态输入字段

我有发票表单，用户可以根据需要添加尽可能多的部分。当用户输入部件号时，我有一个ajax脚本，可以自动填充描述和价格。Ajax自动填充动态输入字段

的脚本适用于首字母输入字段，但是当我添加更多的输入字段，在新的输入字段的脚本不工作：

******请检查我的更新***** * - 仍然没有工作

<table id="partstable" class="table order-list2 table-hover table-condensed table-bordered" > 
<thead> 
    <tr> 
    <th width="30%">Part #</th> 
    <th width="30%">Part Desc.</th> 
    <th size="4">Part Price</th> 
    <th>Part Qty</th> 
    <th>Total</th> 
    <th></th> 
    </tr> 
</thead> 
<tbody> 
    <tr> 
    <td><input type="text" class="input-small classpp" name="partnumber" id="partnumber0"></td> 
    <td><input type="text" class="input-small classd" name="partdescription1" id="partdescription0"></td> 
    <td><input type="text" class="input-small classp" name="partprice" id="partprice0" size="4" onblur="doCalcoriginal(); calculate(); "></td> 
    <td><input type="text" class="input-small" name="partquantity" id="partquantity0" size="4" onblur="doCalcoriginal(); calculate(); showMessage(); "></td> 
    <input type="hidden" readonly class="partdb" size="4" name="partdb" id="partdb0" style="background-color: transparent;border: 0px solid;" > 
    <td><span class="amount" ></span></td> 
    <td><a class="deleteRow2"></a></td> 
    </tr> 
</tbody> 
<tfoot> 
    <tr> 
    <td colspan="5" style="text-align: left;"> 
     <input type="button" id="addrow2" value="Add" class="btn btn-primary" /> 
    </td> 
    </tr> 
</tfoot> 
</table>

AJAX

<script type="text/javascript"> 
var count 0; 
$("#partstable").on('blur keyup', "#partnumber"+count , function() { 


searchString=$(this).val(); 


    var data = 'partnumber='+searchString; 


    if(searchString) { 
     // ajax call 

     $.ajax({ 
      type: "POST", 
      url: "partpricequery.php", 
      data: data, 

      success: function(html){ 

    result = String(html).split("|"), 


var counter=0; 
loop{ 
$("#partdescription"+counter).val(result[0]); 
$("#partprice"+counter).val(result[1]); 
counter++; 
} 



showlabel(); 

     } 
     });  
    } 
    return false; 
    }); 

</script>

添加更多按钮

<script> 
$(document).ready(function() { 
var counter = 0; 

$("#addrow2").on("click", function() { 
    doCalc(); 
    doCalcoriginal(); 
    calculate(); 
    grandsum(); 


    counter = $('#partstable tr').length - 2; 

    var newRow = $("<tr>"); 
    var cols = ""; 
    cols += '<td><input text="text" class="input-small" name="partnumber" id="partnumber'+counter+'" /></td>'; 
    cols += '<td><input text="text" class="input-small" name="partdescription" id="partdescription'+counter+'"/></td>'; 
    cols += '<td><input class="input-small" size="4" type="text" name="partprice" id="partprice'+counter+'" onblur="doCalc(); doCalcoriginal(); calculate(); calculate2();"/></td>'; 
    cols += '<td><input class="input-small" size="4" type="text" name="partquantity" id="partquantity"'+counter+'" onblur="doCalc(); doCalcoriginal(); calculate(); calculate2();"/></td>'; 
    cols += '<input type="hidden" readonly class="parttotal" size="4" name="partdb[]" style="background-color: transparent;border: 0px solid;" >'; 
    cols += '<td><span class="amount"></span></td>'; 

    cols += '<td><input type="button" class="ibtnDel btn btn-danger" value="X"></td>'; 

    newRow.append(cols); 
    if (counter == 100) $('#addrow2').attr('disabled', true).prop('value', "You've reached the limit"); 
    $("table.order-list2").append(newRow); 
    counter++; 
}); 

$("table.order-list2").on("click", ".ibtnDel", function (event) { 
    $(this).closest("tr").remove(); 
    doCalc(); 
    doCalcoriginal(); 
    calculate(); 
    grandsum(); 


    counter -= 1 
    $('#addrow2').attr('disabled', false).prop('value', "Add Row"); 
}); 
}); 


</script>

来源

2017-03-10 JD6969

当这样做：

$("#partnumber").on('blur keyup' , function() { 
    ................. 
});

该事件被绑定到存在在.on()方法例如称为时的元件文件加载。您需要使用event delegation来动态创建元素。

所以针对家长说，持有投入和实际的表使用像委派事件：通过寻找事件

$("table").on('blur keyup', "#partnumber" , function() { 
    ................. 
});

现在，这将监听在桌子上的后代事件冒泡表而不是直接依附于这些元素。

来源

2017-03-10 22:37:27

现在触发每个#partnumber但只因为你用'$针对通用元件自动填充第一partdescription和partprice – JD6969

（ “#partdescription”）。val（result [0]），$（“＃partprice”）.val（result [1]），这是它遇到的第一个。您需要确定索引。最简单的方法就是在创建计数器变量时添加索引到他们的类/标识/名称，以便您可以轻松区分它们。 –

我试过了，见上面 – JD6969

您正在使用ID。那就是问题所在。当使用“id”时，第一个仅适用。有多个元素时总是使用类。

删除ID =“部分号码”和使用类=“部分号码”

来源

2017-03-11 21:06:40

Ajax自动填充动态输入字段

回答

相关问题