如何使用 Javascript 获取多个输入字段的值答案

【问题标题】：How to get values of multiple Input fields using Javascript如何使用 Javascript 获取多个输入字段的值
【发布时间】：2019-02-03 20:59:36
【问题描述】：

我正在尝试使用 PHP 和 AJAX 创建一个电子商务网站，但我有些困惑。我在获取用户购物车的所有输入字段的值时遇到问题。换句话说，假设用户的购物车中有 3 件商品，每件商品的数量为“1”。现在假设用户增加购物车中第二件商品的数量并将其更改为“3”并单击“更新购物车”按钮。单击更新购物车时，我想要的是只占用更新的值而不是其他值。如果那不可能，我想获取所有值，然后相应地更新数据库。目前，当我点击“更新购物车”按钮时，它只占用购物车中第一项的数量值。

PHP代码如下（请不要介意使用的变量）

echo "<tr>
        <td class='p-image'>
          <a href='product-details?id=$fetchProductID'><img alt='' src='$theRealLink'></a>
        </td>
        <td class='p-name'><a href='product-details?id=$fetchProductID'>$theName</a></td>
        <td class='p-amount'>INR $fetchProductUnitPrice</td>
        <td class='p-quantity'><input maxlength='100' type='text' value='$fetchProductQuantity' name='quantity' class='productQuantity' data-quant='$fetchProductQuantity'></td>
        <td class='p-total'><span>INR $fetchedProductTotal </span></td>
        <td class='edit'><a href='javascript:void(0)' class='delete-from-cart' data-id='$fetchProductID'><img src='assets/img/icon/delte.png' alt=''></a>
        </td>
      </tr>";

下面是AJAX代码

$('#update-cart').click(function() {
    var quantity = $('.productQuantity').val();
    console.log(quantity);
});

【问题讨论】：

$('.productQuantity') 实质上将返回一组具有productQuantity 类集的html 项，查询val() 只会获得第一个此类元素的值。您需要遍历整个集合。请参阅@Patrick Simard 关于“如何”的回答。

标签： javascript php ajax

【解决方案1】：

我可能会去更新所有这些。您可以为此使用 jquery 每个函数

$(".productQuantity").each(function() {
    var quantity = $(this).val();
    console.log(quantity);
    // Get the data-id and build an array so you submit only 1 ajax request
});

【讨论】：

它现在运行了 2 次（因为购物车中有 2 个产品），但获取了购物车中第一个产品的数量（即打印 1、2 次）
你需要从当前迭代器中获取值——试试$(".productQuantity").each(function(idx,elm) { console.log(elm.value); });

【解决方案2】：

我不确定我的解释是否正确，但如果您要更新数据库中引用购物车中某件商品的值，这意味着您还需要确定哪个商品是正在更新的那个，但我不太清楚这在提供的代码中很清楚。

无论如何，您可以在数量字段上添加“onkeyup”事件，并为该数量所属的“项目”设置一个标志，或将其存储在要更新的项目数组中，一旦您按下“更新购物车” " 然后只需将修改后的项目发送到服务器。

【讨论】：