如何在不知道按鈕ID /類或表單ID /類的情況下提交表單？

Question

您好，我有一個單一的頁面中有多個表單，每個這有不同的productId從後端得到，每個表單有2個按鈕一個添加產品一個刪除產品。如果他們點擊「+」按鈕，它必須去「如果」在javascript條件下，如果他們點擊「 - 」按鈕，它必須去「其他」條件在javascript

這是我的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); 
      }); 

每當我上的任意鍵單擊它只會「如果條件」！ 任何人都可以請建議我我做錯了什麼？

Answer 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--;