我正在努力制作一个带有动态字段的 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>
最佳答案
问题是您重复使用“items_id”作为许多元素的 ID。但 ID 必须是唯一的。当你运行 document.getElementById('items_id')
(它只能返回一个元素)代码无法知道您实际指的是具有该 ID 的多个元素中的哪一个。
现在,据我了解,您想在选择和旁边的输入框之间建立关系。看来select的值肯定会影响输入框的值。因此,您需要一种方法来识别与值已更改的选择相关的正确输入框。
有很多方法可以做到这一点,但一种简单的方法是在 <select
上设置一个数据属性。包含行的唯一标识符(您可以为此使用 idf
)。然后设置与 id
相同的值相关的输入框。然后当“更改”事件发生时,您可以从触发事件的选择中获取数据属性,并使用它来选择要更新的正确输入 ID。
我还为此使用了更多的 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[]' />";
然后用这个事件处理程序替换整个“autofill()”函数:
$(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
中第一项数据的股票值(value)数组(和/或它只返回一个项目,尽管它是一个数组)。如果这不正确,那么请澄清此数据的情况 - 如果实际上您只询问有关一项的信息,那么服务器返回一个数组似乎很奇怪。它只返回一个对象会更合乎逻辑。
附言作为一个无关紧要的小点,你也可以简化这一行
idf = (idf-1) + 2;
到
idf++;
关于javascript - 动态 ajax 表单选择框自动填充,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54777433/