如何从mysql数据库中获取数据并用该数据填充表单中的动态字段?

时间:2019-05-31 16:06:40

标签: php jquery ajax

我有一个表格,用户可以在其中添加要购买的产品。当用户在“ 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);
    });

0 个答案:

没有答案