如何在不知道按钮 id/class 或表单 id/class 的情况下提交表单？答案

【问题标题】：how to submit a form without knowing a button id/class or form id/class?如何在不知道按钮 id/class 或表单 id/class 的情况下提交表单？
【发布时间】：2017-09-09 11:48:37
【问题描述】：

嗨，我在一个页面中有多个表单，每个表单都有从后端获取的不同 productId，每个表单都有 2 个按钮，一个用于添加产品，一个用于删除产品。如果他们单击“+”按钮，则必须转到 javascript 中的“if”条件，如果单击“-”按钮，则必须转到 javascript 中的“else”条件

这是我的html

<form>
    <input type="hidden" class="form-control" name="productCatalogId" value="<%= data.productDetails[i].productCatalogId %>">
    <input type="hidden" class="form-control" name="productquantity" value="<%= data.productDetails[i].productQuantity %>">
    <button type="button" value="addition" class="btn btn-primary btn-sm">+</button>
    <h4>
        <%= data.productDetails[i].productQuantity %>
    </h4>
    <button type="button" value="substraction" class="btn btn-primary btn-sm">- </button>
</form>

像这样我有很多表格！！

还有我的 javascript

$(':button').click(function(e) {
                e.preventDefault();
                var updateOrder = $(this.form).serializeArray();
                dataObj = {};
                $(updateOrder).each(function(i, field) {
                    dataObj[field.name] = field.value;
                });
                console.log(dataObj['productquantity']);
                var orderId = $("#orderid").val();
                updateOrder.push({
                    name: "orderId",
                    value: orderId,
                });
                // console.log($(':button').val());
                if ($(':button').val() == 'addition') {
                    var quantity = parseInt($("input[name=productquantity]").val()) + 1;
                } else {
                    var quantity = parseInt($("input[name=productquantity]").val()) - 1;
                }
                updateOrder.push({
                    name: "quantity",
                    value: quantity,
                });
                // console.log(updateOrder);
                $.ajax({
                    url: '/order/updateorderitems',
                    type: 'POST',
                    data: updateOrder,
                    success: function(response) {
                        if (response.success) {
                            // console.log(response);
                        }
                    }
                });
                // console.log(productData);
            });

每当我点击任何按钮时，它只会“如果条件”！谁能告诉我我做错了什么？

【问题讨论】：

标签： javascript jquery html node.js ejs

【解决方案1】：

问题是因为在您的 if 语句中您使用了 :button 选择器。当与val() 结合使用时，它只会从匹配集中的第一个:button 元素中读取。

要解决此问题，请在事件处理程序中使用 this 关键字来仅引用被单击的按钮。试试这个：

if ($(this).val() == 'addition') {
    var quantity = parseInt($("input[name=productquantity]").val(), 10) + 1;
} else {
    var quantity = parseInt($("input[name=productquantity]").val(), 10) - 1;
}

还要注意，这可以更简洁，像这样：

var quantity = parseInt($("input[name=productquantity]").val(), 10) 
$(this).val() == 'addition' ? quantity++ : quantity--;

【讨论】：