從多個具有相同名稱的文本框中獲取帶有javascript的輸入框的值

Question

我正在為自己的工作寫的php應用程序有問題。 這就是我所擁有的。

我有一個包含項目的數據庫表。 我的列是itemID，itemcode，描述，價格，類別和大小。 我寫了一個php函數，能夠根據類別來調用我需要的項目。 php頁面具有這樣的項目列表

商品代碼| 描述| 價格| 尺寸 （數量（名稱=“數量”）的輸入框）| （添加按鈕）

我的目標是，當有人輸入數量並點擊提交時，它將添加到數據庫中的客戶訂單中。 很簡單。 我想用javascript編寫代碼，因為我編寫了更多代碼來提交給數據庫，而不必刷新頁面。 如果我僅用php進行操作，則可以將所有變量發送到另一個php文檔中，並以這種方式解決所有問題。

我遇到的問題是，無論我單擊添加哪個JavaScript按鈕，我編寫的javascript代碼都只會注冊第一個輸入框。 因此，如果我填寫與該行中該項目相對應的第四個輸入框，它認為我正在嘗試計算第一個輸入框的值。

我所擁有的一個簡單例子

<script type="text/javascript">
</script>

<table>
<?php
foreach ($items->listByCategory('cat') as $itemlist) {
  echo '<tr>';
  echo '<td>'.$itemlist["itemcode"].'</td>';
  echo '<td>'.$itemlist["desc"].'</td>';
  echo '<td>'.$itemlist["price"].'</td>';
  echo '<td>'.$itemlist["size"].'</td>';
  echo '<td><input type="text" name="qty"></td>';
  echo '<td><input type="submit" value="Add"></td>';
}
?>
</table>

我已經嘗試過在整個表格周圍放置一個表格，並將最后兩個單元格合並在一起，然后將表格包裝在標簽內。 在這種情況下，我只需添加一個

echo '<td>';
echo '<form>';
echo '<input type="text" name="qty">';
echo '<input type="hidden" name="itemID" value="'.$itemlist["itemID"].'">
echo '<input type="submit" value="Add">';
echo '</td>';

這樣做似乎更有意義。

我需要傳遞以下變量：商品ID，數量輸入框的輸入和訂單ID，它們是URL的一部分（order.php？orderID = xxx）。

Answer 1

這是一個經典問題，沒有唯一地命名您的字段。 將項目ID放在名稱上，並為按鈕提供一個類，例如：

 foreach ($items->listByCategory('cat') as $itemlist) {
  echo '<tr>';
    echo '<td>'.$itemlist["itemcode"].'</td>';
    echo '<td>'.$itemlist["desc"].'</td>';
    echo '<td>'.$itemlist["price"].'</td>';
    echo '<td>'.$itemlist["size"].'</td>';
    echo '<td><input type="text" name="qty_'.$itemlist["itemID"].'"></td>';
    echo '<td><input class="mysub" type="submit" name="btn_'.$itemlist["itemID"].'" value="Add">  </td>';
  echo '<tr>';
}

然后您可以創建一個處理程序，例如

  $(".mysub").click(function() { 
    //get item id by naming convention
    var itemid = $(this).attr('name').substring(4);  //4 is "btn_", we want what comes after it
    //now you can get qty, like
     var qty = $("input[name='qty_"+itemid+"']").val();

    //now you can do your ajax stuff with those 2 vars in a POST.
 });

工作演示： http : //jsfiddle.net/sq4ecf4j/

Answer 2

使用AJAX函數可能是最好的。 jQuery附帶了AJAX。

我通常要做的是將id放在表單元素上，如下所示：

<input type="text" name="qty" id="qty"></input>

使用jQuery，您可以通過調用id來獲取form元素的值：

var qty = $('#qty').val();

一旦對一個或多個表單項執行了此操作，請進行AJAX調用並傳遞數據。

var qty = $('#qty').val();
var item = $

function submit()
    $data = (
    $.ajax({
        url: '/path/to/url',
        type: 'post',
        data: { qty: qty },
        success: function(result){
            alert(result);
        },
        error: function(xhr){
            // display the error
            alert(xhr.responseText);
        }
    });