Multiple forms submit not working correctly

Question

I try to add products to order cart using one submit button.

Example of form (other forms are the same which difference by form's id):

<form action="/products" method="post" id="basic-cart-add-to-cart-quantity-form-37" accept-charset="UTF-8">
  <div>
    <input type="hidden" name="nid" value="37">
    <div class="form-item form-type-textfield form-item-quantity">
      <input type="text" id="edit-quantity" name="quantity" value="0" size="5" maxlength="128" class="form-text" style="border-color: rgb(189, 159, 87);">
    </div>        
  </div>
</form>
...
<div class="button basic-cart-add-to-cart-link">Add to cart</div>

So, on the page can be different number of forms. I choose a product, enter quantity in inputs, after that I submit all forms using "Add to cart" button.

I tried to submit 6 forms (products) few times, but every time was added 5 products (but not 6).

$(function(){
  $('.basic-cart-add-to-cart-link').click(function(){
    var speed = 1250;
    for(var i = 1; i <= idArr.length; i++) {
      setTimeout(function(y) {
        var formId = 'form#basic-cart-add-to-cart-quantity-form-' + y;
        var selector = formId + ' ' +'input[name="quantity"]';
        var q = parseInt($(selector).val());
        if(q > 0) {
          saveSelectorInStorage(selector);
          $(formId).submit();
        }
      }, speed*i, idArr[i-1]);
    }
  });
});

idArr - forms ids array where quantity was changed. If id="basic-cart-add-to-cart-quantity-form-37", in idArr I put 37. I checked idArr and there I have correct ids. How to resolve it?

when you push add to car you want all the items from the page that have forms to be submitted? is that even possible ,why will you want to do that? — madalinivascu, Oct 21 '16 at 06:49
@madalin, for example i have 10 forms. then i put in 6 inputs quantity. after that i push add to cart button. in order should be 6 products but i have less. — DenysM, Oct 21 '16 at 06:54
you can only submit ONE form at a time man see @Justinas answer — madalinivascu, Oct 21 '16 at 06:58
you can submit multiple forms at the same time, just not how your doing it. You will need to use an [asynchronous submit using AJAX](http://stackoverflow.com/questions/1960240/jquery-ajax-submit-form) — Liam, Oct 21 '16 at 07:37
Possible duplicate of [Submit two forms with one button](http://stackoverflow.com/questions/7843355/submit-two-forms-with-one-button) — Liam, Oct 21 '16 at 07:41

score 1 · Answer 1 · answered Oct 21 '16 at 06:54

You can't submit more than one form at the time because browser will cancel all but the last form submit socket.

Instead of using multiple forms use indexed inputs:

<div>
    <input type="hidden" name="Product[0]nid" value="37">
    <div class="form-item form-type-textfield form-item-quantity">
        <input type="text" name="Product[0]quantity" value="0" class="form-text">
    </div>        
</div>

<div>
    <input type="hidden" name="Product[1]nid" value="39">
    <div class="form-item form-type-textfield form-item-quantity">
        <input type="text" name="Product[1]quantity" value="1" class="form-text">
    </div>        
</div>

In PHP side you will receive form data as follows:

var_dump($_POST);

[
    'Product' => [
        [
            'nid' => '37',
            'quantity' => '0',
        ],
        [
            'nid' => '39',
            'quantity' => '1',
        ],
    ]
];

Multiple forms submit not working correctly

1 Answers1