[英]changing value of dynamically generated input field jquery
我正在嘗試更改動態生成的輸入字段的值。
場景:
我有一個名為add items
的按鈕,單擊它會附加三個輸入字段,分別為itemname
, units
和unitprice
,其中itemname
具有jqueryui autocomplete
,而且效果working great
,但是我還會列出itemname field
keypress event
,因此當用戶在選擇后按Enter時自動完成所需的商品名稱,它應該獲得用戶使用自動完成代碼選擇的商品名稱的單位和價格:
var count = 1;
$('#add-items').click(function () {
$('#items').append('<div><br><i class="fa fa-angle-right"></i>. <input type="text" name="itemname[]" id="itemname-' + count + '" class="itemname" placeholder="item name"/>\n\
<input type="text" name="units[]" id="units-' + count + '" size="10" placeholder="units" style="text-align: right"/>\n\
<input type="text" name="unitprice[]" id="unitprice-' + count + '" size="10" placeholder="unit price" style="text-align: right"/>\n\
<a href="javascript:void(0);" id="remove-items"><i class="fa fa-trash-o"></i></a></div>');
$('#itemname-' + count).autocomplete({
source: "<?= site_url('administrator/item-autocomplete') ?>",
minLength: 2
});
$('#itemname-' + count).on('keypress', function (e) {
var name = jQuery(this).val();
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 13) {
e.preventDefault();
$.ajax({
type: "POST",
url: "<?= base_url() ?>administrator/get-unit-and-price/",
data: {name: name},
dataType: "json",
success: function (data) {
if (data.valid == true) {
//document.getElementById('units-' + count).value = data.unit;
//document.getElementById('unitprice-' + count).value = data.price;
$('#units-' + count).attr('value', data.unit);
$('#unitprice-' + count).attr('value', data.price);
//$('#units-' + count).val(data.unit);
//$('#unitprice-' + count).val(data.price);
} else {
alert(data.html);
}
}
});
}
});
count++;
});
一切正常,但是它並沒有改變unit和unitprice的值,我也嘗試過提醒data.unit
和data.price
以及從數據庫中提醒適當的值。
我想知道我需要做些什么才能使其工作..尋求建議和幫助,在此先感謝..對不起英語不好。
發布解決方案,以便其他人可以獲得幫助... :)
::::::::::::::::::::::::::EDIT:::::::::::::::::::::::::::::::
將data-count
到動態輸入字段itemname[]
並修改了ajax的成功功能:
$('#units-' + thecount).attr('value', data.unit);
$('#unitprice-' + thecount).attr('value', data.price);
現在一切正常,當我按Enter時,它也會更改units[]
和unitprice[]
輸入字段的值,
::::::::::::::updated solution::::::::::::::::
var count = 1;
$('#add-items').click(function () {
$('#items').append('<div><br><i class="fa fa-angle-right"></i>. <input data-count="'+ count +'" type="text" name="itemname[]" id="itemname-' + count + '" class="itemname" placeholder="item name"/>\n\
<input type="text" name="units[]" id="units-' + count + '" class="units" size="10" placeholder="units" style="text-align: right"/>\n\
<input type="text" name="unitprice[]" id="unitprice-' + count + '" class="unitprice" size="10" placeholder="unit price" style="text-align: right"/>\n\
<a href="javascript:void(0);" id="remove-items"><i class="fa fa-trash-o"></i></a></div>');
$('#itemname-' + count).autocomplete({
source: "<?= site_url('administrator/item-autocomplete') ?>",
minLength: 2
});
$('#itemname-' + count).on('keypress', function (e) {
var name = jQuery(this).val();
var thecount = jQuery(this).data('count');
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 13) {
e.preventDefault();
$.ajax({
type: "POST",
url: "<?= base_url() ?>administrator/get-unit-and-price/",
data: {name: name},
dataType: "json",
success: function (data) {
if (data.valid == true) {
$('#units-' + thecount).attr('value', data.unit);
$('#unitprice-' + thecount).attr('value', data.price);
} else {
alert(data.html);
}
}
});
}
});
count++;
});
謝謝大家....
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.