Question

我有一个表格，在表格行中有4个输入。

我使用Javascript将动态行添加到表单中：产品，材料，变体，费用

一旦我更改产品的值（选择框），我想使用从PHP MySQL数据库检索到的值来填充费用的值

我的当前代码允许我仅为主行执行此操作。

我希望它能够独立地为所有动态添加的行工作，特别是对于像

这样的输入

view_material_detail(this.value); →  Displays Image within **<p style=" margin:0 auto;" id="view_material"></p>**

get_Charges(this.value);  → Populates value of 'making_charges' from MySQL Database via AJAX Call .

HTML代码（ NewOrder.php ）

<form id="newOrder" method="POST">
<div class="">
    <h2 class="PageHeader">New Order</h2>
    <div class="cx_section">
    <input type="text" pattern="[0-9]*" autocomplete="nope" name="mobile" id="mobile" class="small_input" placeholder="Mobile Number" onKeyup="get_cx_details(this.value);" autofocus="yes">

    <div class="" id="get_cx_details" style="width:100%;margin:0 auto;">

//Function **get_cx_details** ↑ WORKS FINE

    </div>
    </div>
    <div class="">
        <table class="Box" width="100%"  cellspacing="1" cellpadding="2" id="ProductHeader">
        <h2 class="PageHeader">Item</h2></tr>
        </table>

    <div class="item_section" >
        <table class="Box" width="100%"  cellspacing="1" cellpadding="2" id="OrderTable">

            <tr  id="row1" style="width:100%;">
              <td class="product_row">
              <?php


$result = mysqli_query($con, "SELECT * FROM `product` GROUP BY `name` ORDER BY `name` ASC");
echo '

下拉列表的原始代码产品

<select onChange="get_Charges(this.value);" name="product[]" id="product">
<option value="">Select Item</option>';
while($row = mysqli_fetch_array($result)) {
    echo '<option value="'.$row['model'].'">'.$row['name'].'</option>';
}
echo '</select></td>';
mysqli_free_result($result);

?>

@mplungjan建议的代码

<select name="product[]" class="product">
    <option value="">Select Item</option>';
    while($row = mysqli_fetch_array($result)) {
        echo '<option value="'.$row['model'].'">'.$row['name'].'</option>';
    }
    echo '</select></td>';
    mysqli_free_result($result);

    ?>

代码继续......

<td class="product_row"><input id="material" onkeyup="view_material_detail(this.value);" name="material[]"  type="text" placeholder="Material Code" />
<p style=" margin:0 auto;" id="view_material"></p>    
<td class="product_row"><input id="variations" name="variations[]" type="text" placeholder="Variations" /></td>

收取费用当产品的值发生变化时，值应自动填充

文字输入原始代码收费

<td class="product_row" id="making_charges"><input id="mkg_charges" name="making_charges[]" type="number" pattern="[0-9]*" value="" /></td></tr>
</table>

由@mplungjan建议的代码 -

<td class="product_row"><input class="mkg_charges" name="making_charges[]" type="number" pattern="[0-9]*" value="" /></td></tr>
    </table>

代码继续......

    </div>
</div>

<p>
            <input type="button" value="Add Item" onClick="addRow('OrderTable')" class="Box" />
            <input type="submit" value="Delete Item" onClick="deleteRow('OrderTable')" class="Box">
          </p>
          <input type="submit" name="submit_val" value="Submit" />
</form>

我需要 get_making_charges.php AJAX函数的PHP代码以及独立更新 making_charges 的值的代码 （用于动态输入）还有，如果有的话）从PHP AJAX Call→

中检索

AJAX功能

功能的原始代码 get_Charges（）;

function view_material_detail(val) {  
           $.ajax({
    type: "POST",
    url: "scripts/get_making_charges.php",
    data:'product='+val,
    success: function(data){
        $("#mkg_charges").val(data);
    }
    }); 

 }

结果→第一行收费更改

@mplungjan建议的代码

    $("#OrderTable").on("change",".product",function() { // delegated on change
  $this = $(this); // save the select for later
  $.ajax({
    type: "POST",
    url: "scripts/get_making_charges.php",
    data:'product='+$this.val(),
    success: function(data){
      $this.closest("tr").find(".mkg_charges").val(data); // a number? +data to make numeric 
    }
  }); 
});

结果什么都没发生

PHP脚本

    ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
//Include database connection
include __DIR__ . '/../dbconn.php';

if(isset($_POST['product']))  
 // echo $_POST['material'];
    $product_model = trim($_POST["product"]); //escape string
 { 
     $check_existing = mysqli_query($con,"SELECT `making_charges` FROM `product` WHERE `model` = '$product_model'");

    if(mysqli_num_rows($check_existing) == 1)
    {
        $result_check = mysqli_fetch_array($check_existing);

$making_charges = $result_check['making_charges'];
 echo $making_charges;

// echo "<input class='mkg_charges' name='making_charges[]' type='number' pattern='[0-9]*' value='$making_charges' />"; 

}


else
    {
       // Nothing Happens
    }

}

?>

根据屏幕截图，如果我更改主要行中第一个输入下拉框的值，则不会发生任何事情。然而，从理论上讲，制作费应该自动填充。我坚持要选择什么，以及如何使这项工作！

Answer 1

使用jQuery分配事件处理程序而不是内联。 - 删除onChange="get_Charges(this.value);"并将onchange添加到脚本块
在动态元素上使用委派
没有重复的ID。将<input id="mkg_charges" name="making_charges[]"更改为<input class="mkg_charges" name="making_charges[]"
将选择的id="product"更改为class="product"
拥有PHP echo $making_charges;并将值设置为

$("#OrderTable").on("change",".product",function() { // delegated on change
  $this = $(this); // save the select for later
  $.ajax({
    type: "POST",
    url: "scripts/get_making_charges.php",
    data:'product='+$this.val(),
    success: function(data){
      $this.closest("tr").find(".mkg_charges").val(data); // a number? +data to make numeric 
    }
  }); 
});

$("#OrderTable").on("change", ".product", function() { // delegated on change
  $this = $(this); // save the select for later
  var sel = $this.get(0).selectedIndex; // for demonstration
  console.log(sel)
  /* 
  $.ajax({
    type: "POST",
    url: "scripts/get_making_charges.php",
    data: 'product=' + $this.val(),
    success: function(data) {
      $this.closest("tr").find(".making_charges").html(data);
    }
  });
  */
    $this.closest("tr").find(".mkg_charges").val(sel);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="newOrder" method="POST">
  <div class="">
    <h2 class="PageHeader">New Order</h2>
    <div class="cx_section">
      <input type="text" pattern="[0-9]*" autocomplete="nope" name="mobile" id="mobile" class="small_input" placeholder="Mobile Number" onKeyup="get_cx_details(this.value);" autofocus="yes">

      <div class="" id="get_cx_details" style="width:100%;margin:0 auto;">
      </div>
    </div>
    <div class="">
      <table class="Box" width="100%" cellspacing="1" cellpadding="2" id="ProductHeader">
        <h2 class="PageHeader">Item</h2>
        </tr>
      </table>

      <div class="item_section">
        <table class="Box" width="100%" cellspacing="1" cellpadding="2" id="OrderTable">

          <tr id="row1" style="width:100%;">
            <td class="product_row">
              <select name="product[]" class="product">
<option value="">Select Item</option>
    <option value="row1">Row1</option>
    <option value="row2">Row2</option>
</select></td>

            <td class="product_row"><input id="material" onkeyup="view_material_detail(this.value);" name="material[]" type="text" placeholder="Material Code" />
              <p style=" margin:0 auto;" id="view_material"></p>


              <td class="product_row"><input id="variations" name="variations[]" type="text" placeholder="Variations" /></td>

              <td class="product_row"><input class="mkg_charges" name="making_charges[]" type="number" pattern="[0-9]*" value="" /></td>
          </tr>
        </table>


      </div>
    </div>

    <p>
      <input type="button" value="Add Item" onClick="addRow('OrderTable')" class="Box" />
      <input type="submit" value="Delete Item" onClick="deleteRow('OrderTable')" class="Box">
    </p>
    <input type="submit" name="submit_val" value="Submit" />
</form>

Answer 2

最终解决了

@mplungjan

您的代码几乎完美，但您忘记添加一些代码

<强> $（文件）。就绪（函数（）{

$("#OrderTable").on("change",".product",function() { // delegated on change
  $this = $(this); // save the select for later
  $.ajax({
    type: "POST",
    url: "scripts/get_making_charges.php",
    data:'product='+$this.val(),
    success: function(data){
      $this.closest("tr").find(".mkg_charges").val(data); // a number? +data to make numeric 
    }
  }); 
}); 
});

基于其他输入值

2 个答案: