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

您可以使用独立于两种形式的单独按钮。在该Button的click事件上，您可以使用它们的Submit方法提交这两个表单。

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>

Answer 2

据我所知您无法执行此操作，因为它将使浏览器重定向到表单action属性中指定的URL。而且它无法重定向到两个不同的位置。

要完成多种表单提交，可以将XMLHttpRequest与JavaScript的FormData API一起使用，或在JSON中对其进行编码，然后再将其发送到服务器。

一键提交多个表格

2 个答案: