javascript - 一键提交多个表单

Question

所以基本上我有两种这样的形式:

<form method="post" action="url1">
    <input type="hidden" name="add-to-cart" value="product_id1">
    <input type="hidden" name="wc_bookings_field_start_date_year" value="2018">
    <input type="hidden" name="wc_bookings_field_start_date_month" value="06">
    <input type="hidden" name="wc_bookings_field_start_date_day" value="30">
    <button type="submit">Add to cart</button>
</form>

<form method="post" action="url1">
    <input type="hidden" name="add-to-cart" value="product_id2">
    <input type="hidden" name="wc_bookings_field_start_date_year" value="2018">
    <input type="hidden" name="wc_bookings_field_start_date_month" value="06">
    <input type="hidden" name="wc_bookings_field_start_date_day" value="30">
    <button type="submit">Add to cart</button>
</form>

无论如何我可以将两个按钮合并为一个提交两个表单的按钮吗？将两种产品同时添加到购物车

Answer 1

您可以使用独立于任一表单的单独按钮。在该按钮的点击事件中，您可以使用它们的提交方法提交这两个表单。

var btn = document.getElementById("myBtn");
var forms = document.getElementsByTagName("form");
for(var i = 0; i < forms.length; i++) {
    forms[i].submit();
}

<form method="post" action="url1">
    <input type="hidden" name="add-to-cart" value="product_id1">
    <input type="hidden" name="wc_bookings_field_start_date_year" value="2018">
    <input type="hidden" name="wc_bookings_field_start_date_month" value="06">
    <input type="hidden" name="wc_bookings_field_start_date_day" value="30">
    <button type="submit">Add to cart</button>
</form>

<form method="post" action="url1">
    <input type="hidden" name="add-to-cart" value="product_id2">
    <input type="hidden" name="wc_bookings_field_start_date_year" value="2018">
    <input type="hidden" name="wc_bookings_field_start_date_month" value="06">
    <input type="hidden" name="wc_bookings_field_start_date_day" value="30">
    <button type="submit">Add to cart</button>
</form>

<button id="myBtn">Add both</button>