我有一个表格,用户可以在其中添加要购买的产品。当用户在“ DPB SKU”字段中输入项目编号时,产品描述将从数据库的“ Item Description”输入字段中动态填充。
我只能用数据库中的数据填充第一个“项目描述”字段,但是我不知道如何或在何处调整代码,因此也将基于“ DPB SKU”填充新的动态字段。输入。
预先感谢您对本主题的任何帮助。
HTML表单输入字段->当用户在“ dpb_sku”字段中输入项目编号时,将触发“ showProduct(this.value)”功能:
<td><input type="text" name="dpb_sku[]" id="dpb_sku1" class="form-
control input-sm" onchange="showProduct(this.value)" required /></td>
<td><input type="text" name="purchase_order_item_name[]"
id="purchase_order_item_name1" class="form-control input-sm" required
/></td>
从数据库获取数据的PHP代码:
$q = intval($_GET['q']);
$con = mysqli_connect($servername,$username,$password,$dbName);
if (!$con) {
die('Could not connect: ' . mysqli_error($con));
}
mysqli_select_db($con,"ajax_info");
$sql="SELECT * FROM products WHERE product_sku = '".$q."'";
$result = mysqli_query($con,$sql);
while($row = mysqli_fetch_array($result)) {
$product_description = $row['product_description'];
echo $product_description;
}
mysqli_close($con);
JQUERY和AJAX代码可将数据动态添加到输入字段:
<script>
function showProduct(str) {
if (str=="") {
document.getElementById("dpb_sku1").innerHTML="";
return;
}
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (this.readyState==4 && this.status==200) {
var infoPrint = document.getElementById("purchase_order_item_name1").innerHTML=this.responseText;
$("#purchase_order_item_name1").val(infoPrint);
}
}
xmlhttp.open("GET","get_product.php?q="+str,true);
xmlhttp.send();
}
</script>
用于动态添加更多字段的HTML代码->当用户在动态创建的“ dpb_sku”字段中输入商品编号时,应该在此处触发“ showProduct(this.value)”功能:
$(document).ready(function(){
$(document).on('click', '#add_row', function(){
count++;
$('#total_item').val(count);
var html_code = '';
html_code += '<tr id="row_id_'+count+'">';
html_code += '<td><input required type="text" name="dpb_sku[]"
id="dpb_sku'+count+'" class="form-control input-sm"
onchange="showProduct(this.value)" /></td>';
html_code += '<td><input required type="text"
name="purchase_order_item_name[]"
id="purchase_order_item_name'+count+'" class="form-control input-sm"
/></td>';
$('#invoice-item-table').append(html_code);
});