php - 使用 Jquery Php 和 mysql 从订单表单中动态添加的行获取数据价格属性

Question

我有一个订单表格，其中的产品从我的 mysql 数据库提取到下拉菜单中。客户从下拉菜单中选择产品，然后通过数据价格属性自动填充价格字段。我添加了一个按钮来添加更多产品(克隆包含产品和价格字段的行)...当我这样做时，它仍然填充添加行中的下拉菜单，但价格字段仅自动填充在第一行。关于如何使其自动填充动态添加的行有什么想法吗？

用于价格字段的数据价格填充的 Jquery:

<script>
$(function() {  
$('select[name="product"]').change(function()
    {
     $('#price').val($('select[name="product"] option:selected').data('price'));
    });
  });
</script>

Jquery 添加行:

<script>
$(document).ready(function(){
 //This line clones the row inside the '.row' class and transforms it to plain html.
 var clonedRow = $('.row').clone().html();

 //This line wraps the clonedRow and wraps it <tr> tags since cloning ignores those tags
 var appendRow = '<tr class = "row">' + clonedRow + '</tr>';  

 $('#btnAddMore').click(function(){
  //this line get's the last row and appends the appendRow when it finds the correct row.
        $('.orderForm tr:last').after(appendRow);
    });

 //when you click on the button called "delete", the function inside will be triggered.
 $('.deleteThisRow').live('click',function(){
     var rowLength = $('.row').length;
         //this line makes sure that we don't ever run out of rows.
      if(rowLength > 1){
   deleteRow(this);
  }else{
   $('.orderForm tr:last').after(appendRow);
   deleteRow(this);
  }
 });

 function deleteRow(currentNode){
  $(currentNode).parent().parent().remove();
 }
 });

 </script>

HTML:

<div class="pure-control-group">
            <label>Please Choose a Contact</label><select name="contact" required>
            <option value=""></option>
            <?php $usrSql = "SELECT id, firstName, lastName FROM contacts ORDER BY lastName ASC";
                  $usrResult = mysql_query($usrSql, $link);
                  while($usrRow = mysql_fetch_assoc($usrResult)){?>
            <option value="<?php echo $usrRow['id'];?>" <?php if ($getContactId == $usrRow['id']) { ?> selected <?php } ?>><?php echo "".$usrRow['lastName'].", ".$usrRow['firstName'].""; ?></option>
                            <?php } ?>
                      </select>
        </div>              
        <div class="pure-control-group">
            <label>Date</label><input type="text" name="datepicker" id="datepicker" value="<?php echo $date; ?>" />
        </div>

       <table class="orderForm">
       <tr class="row">
       <td>
       <div class="pure-control-group">
            <label>Product or Service</label><select name="product" required>
            <option value=""></option>
            <?php $productSql = "SELECT product_id, product, price FROM products ORDER BY product desc";
                  $productResult = mysql_query($productSql, $link);
                  while($productRow = mysql_fetch_assoc($productResult)){?>
                  <option value="<?php echo $productRow['prouct_id'];?>" data-price="$<?php echo $productRow['price']; ?>"><?php echo $productRow['product']; ?></option>
                            <?php } ?>
                      </select>

       </div>
       <div class="pure-control-group">
       <label>Price</label><input type="text" id="price" name="price">
       </div>
        <div class="pure-control-group">
            <label>Discount %</label><select name="discount" required>
            <option value="" selected>-- None --</option>
            <option value="5">5%</option>
            <option value="10">10%</option>
            <option value="15">15%</option>
            <option value="20">20%</option>
            <option value="25">25%</option>
            <option value="30">30%</option>
            <option value="35">35%</option>
            <option value="40">40%</option>
            <option value="45">45%</option>
            <option value="50">50%</option>
            <option value="55">55%</option>
            <option value="60">60%</option>
            <option value="65">65%</option>
            <option value="70">70%</option>
            <option value="75">75%</option>
            <option value="80">80%</option>
            <option value="85">85%</option>
            <option value="90">90%</option>
            <option value="95">95%</option>
            <option value="100">100%</option>
            </select>

       </div>
       <input type="button" class="deleteThisRow"  value="Delete"/>
       </td>
       </tr>
       </table>
       <input type="button" id="btnAddMore"  value="More Products" class="medBtn"/>
        <div class="pure-control-group">
        <label></label><input type="submit" id="submit" name="submit" value = "Submit" class="pure-button"/>
        </div>
    </fieldset>
</form>

Answer 1

根据您的代码，价格字段是在产品下拉列表更改时填充的。尝试添加

$('#price').val($('select[name="product"] option:selected').data('price'));

在 $('#btnAddMore').click(function(){} 内。

克隆 html 也不是一个好主意。它复制了克隆字段的 id，从而使多个 id 具有相同的名称，这是不正确的。您可以使用类代替 id。