一個ajax函數對多行在相同的表單上運行

Question

我有一個ajax函數，根據選擇的項目填充多個字段。但我想有額外的行，人們可以選擇更多的項目在同一個表單。並試圖在其餘行中運行相同的Ajax函數，而不是僅運行一個。提交表單後，某些行可能會留空。

基於我擁有的代碼填充多行中多個字段的最佳方式是什麼？

這裏是我的表單代碼，它現在只有一排供用戶選擇和插入，但我想有大約10行用戶：

<form name="form" method="post" action="placedOrder.php"> 
    <table width="70%" border="5" align="center"> 
     <tr> 
      <th scope="row">Item Name</th> 
      <th scope="row">Item SKU</th> 
      <th scope="row">Quantity</th> 
      <th scope="row">Side Mark</th> 
      <th scope="row">Unit Price</th> 
      <th scope="row">Total Price</th> 
     </tr> 
     <tr> 
      <th scope="row"> 
       <?php 
        include('connect.php'); 

        $result = mysqli_query("SELECT description FROM products") 
          or die(mysqli_error()); 
        print '<select name="description" id="description" value="description">'; 
        print '<option value="" disabled selected>Please Select A Product</option>'; 
        while ($info = mysqli_fetch_array($result)) 
        { 
         $p = $info["description"]; 
         $p = htmlspecialchars($p); 
         printf('<option value="%s">%s</option>', $p, $p); 
        } 
        print '</select>'; 
        ?> 
      </th> 
      <th scope="row"> 
       <input name="sku_1" id="sku_1" readonly /> 
      </th> 
      <th scope="row"> 
       <input name="qty_1" /> 
      </th> 
      <th scope="row"> 
       <input name="note_1" /> 
      </th> 
      <th scope="row"> 
       <input name="uPrice_1" id="uPrice_1" readonly /> 
      </th> 
      <th scope="row"> 
       <input name="tPrice_1" id="tPrice_1" readonly /> 
      </th> 
     </tr> 
    </table> 
    <input type="submit"/> 
</form> 

對於這裏是我的ajax功能：

<script type="text/javascript" language="javascript"> 
$(function() { 
    $('#description').change(function() { 
     $.ajax({ 
      type: 'POST', 
      url: 'orderAuto.php', 
      data: { 
       description: $('#description').val() 
      }, 
      dataType: 'json', 
      success: function (data) //on recieve of reply 
      { 
       var skuId = data[0]; 
       var unitPrice = data[1]; 
       $('#sku_1').val(skuId); 
       $('#uPrice_1').val(unitPrice); 
      } 
     }); 
    }); 
}); 
</script> 

這裏是我的PHP代碼：

<?php 
    include('connect.php'); 
    $p = mysqli_real_escape_string($_POST['description']); 
    $result = mysqli_query("SELECT sku_id, unit_price FROM products WHERE description= '".$p."'"); 
    $array = mysqli_fetch_array($result); 
    echo json_encode($array); 
?> 

Answer 1

聲明你的AJAX方法，一個名爲函數，它的選擇器數組：這將允許您重用該函數並添加更多使用它的事件處理程序。

喜歡的東西：

function myAJAX(selectorArray) { 
    $.ajax({ 
     //bunch of stuff 
     data: { description: $(this).val() }, 
     // more stuff 
     success: function(data){ 
     var skuId = data[0], 
      unitPrice = data[1]; 
     selectorArray[0].val(skuId); 
     selectorArray[1].val(unitPrice); 
     } 
    }); 
} 

另一種方法是使用一類選擇你的事件處理程序，並在其中指定一個目標元素。

$('mySelector').on('change', '#targetSelector', myAJAX(selectors)); 

這裏的想法是使用父選擇器和其中的一個附加選擇器。

<div id="box"> 
    <p id="text">Here is some text.</p> 
    <p>This is also some text</p> 
</div> 

在這個例子中HTML我們有一個div作爲家長和一些p的爲兒童。因此，如果我們想用我們的事件處理程序（假設我們不需要任何額外的參數），它是這樣的：

$('#box').on('change', '#text', myAJAX); 

我們選擇元素的父，我們要改變asyncronously和過濾到我們希望通過我們的AJAX調用來改變特定的元素。有關更多信息，請參閱使用on方法處理事件的jQuery documentation。