Отправить несколько форм в один клик

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

Насколько я знаю, вы не сможете этого сделать, поскольку браузер будет перенаправлять на URL-адрес, указанный в атрибуте action ваших форм.И он не может перенаправить в два разных местоположения.

Чтобы выполнить множественную отправку формы, вы можете использовать XMLHttpRequest с JavaScript FormData API или кодировать его в JSON перед отправкойна сервер.

Answer 2

Вы можете использовать отдельную кнопку независимо от обеих форм.В случае нажатия этой кнопки вы можете отправить обе формы, используя их метод отправки.

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>