Button click other buttons

Question

$('.button).click(function(){
  var idArr = [22, 35, 37, 52]

  for(var i = 0; i < idArr.length; i++) {
     var selector = 'form#basic-cart-add-to-cart-quantity-form-'+idArr[i];
     $(selector).submit();  
  }
});

I try to add products to order cart. But after submit I have only last product with id = 52.

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

<div class="button basic-cart-add-to-cart-link">Add to cart</div>

<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>
    <button id="edit-submit" name="op" value="Add to cart" type="submit" class="form-submit">Add to cart</button>

    <input type="hidden" name="form_build_id" value="form-XkBpnV4sDZRlhJHkRXZtShRRIzwP2oulCEWML6iwXGo">
    <input type="hidden" name="form_token" value="ImZ8RCj2apjZsSJV4-lgkSDEj4IOUG5fjDy3KdLwJjY">
    <input type="hidden" name="form_id"  value="basic_cart_add_to_cart_quantity_form_37">
  </div>
</form>

How can I add all products by clicking to one btn "Add to cart" which submit other buttons in forms?

Answer 1

There is an event called .trigger.

here is a quote from jQuery's Documentation about this event:

.trigger() Execute all handlers and behaviors attached to the matched elements for the given event type.

Here is an example that fits your needs:

$('.button').click(function(){
  var idArr = [22, 35, 37, 52]
  for(var i = 0; i < idArr.length; i++) {
    var selector = 'form#basic-cart-add-to-cart-quantity-form-'+idArr[i];
    $(selector).trigger("submit");  
  }
});

(For more details on .trigger please reffer to: http://api.jquery.com/trigger/)

Answer 2

You need to add event.preventDefault in your form submit handler as

$('form#basic-cart-add-to-cart-quantity-form-52').submit(function(e){
    console.log('form#basic-cart-add-to-cart-quantity-form-52');
    e.preventDefault();

    })

$(function(){
$('.button').click(function(){

  var idArr = [22, 35, 37, 52];
  var speed=1000;
  for(var i = 1; i <= idArr.length; i++) {
        setTimeout(function(y) {
          
          var selector = 'form#basic-cart-add-to-cart-quantity-form-'+y;
     $(selector).submit();
        }, speed*i, idArr[i-1]);
          
   
     
  }
  for (var i = 0; i < idArr.length; i++) {
    $('form#basic-cart-add-to-cart-quantity-form-' + idArr[i]).‌submit(function(e) {
        console.log('form#basic-cart-add-to-cart-quantity-form-'‌ + idArr[i]);
        e.preventDefault();
    });
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button basic-cart-add-to-cart-link">Add to cart</div>

<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>
    <button id="edit-submit" name="op" value="Add to cart" type="submit" class="form-submit">Add to cart</button>

    <input type="hidden" name="form_build_id" value="form-XkBpnV4sDZRlhJHkRXZtShRRIzwP2oulCEWML6iwXGo">
    <input type="hidden" name="form_token" value="ImZ8RCj2apjZsSJV4-lgkSDEj4IOUG5fjDy3KdLwJjY">
    <input type="hidden" name="form_id"  value="basic_cart_add_to_cart_quantity_form_37">
  </div>
</form>


<form action="/products" method="post" id="basic-cart-add-to-cart-quantity-form-22" accept-charset="UTF-8">
  <div>
    <input type="hidden" name="nid" value="22">
    <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>
    <button id="edit-submit" name="op" value="Add to cart" type="submit" class="form-submit">Add to cart</button>

    <input type="hidden" name="form_build_id" value="form-XkBpnV4sDZRlhJHkRXZtShRRIzwP2oulCEWML6iwXGo">
    <input type="hidden" name="form_token" value="ImZ8RCj2apjZsSJV4-lgkSDEj4IOUG5fjDy3KdLwJjY">
    <input type="hidden" name="form_id"  value="basic_cart_add_to_cart_quantity_form_22">
  </div>
</form>


<form action="/products" method="post" id="basic-cart-add-to-cart-quantity-form-35" 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>
    <button id="edit-submit" name="op" value="Add to cart" type="submit" class="form-submit">Add to cart</button>

    <input type="hidden" name="form_build_id" value="form-XkBpnV4sDZRlhJHkRXZtShRRIzwP2oulCEWML6iwXGo">
    <input type="hidden" name="form_token" value="ImZ8RCj2apjZsSJV4-lgkSDEj4IOUG5fjDy3KdLwJjY">
    <input type="hidden" name="form_id"  value="basic_cart_add_to_cart_quantity_form_35">
  </div>
</form>


<form action="/products" method="post" id="basic-cart-add-to-cart-quantity-form-52" 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>
    <button id="edit-submit" name="op" value="Add to cart" type="submit" class="form-submit">Add to cart</button>

    <input type="hidden" name="form_build_id" value="form-XkBpnV4sDZRlhJHkRXZtShRRIzwP2oulCEWML6iwXGo">
    <input type="hidden" name="form_token" value="ImZ8RCj2apjZsSJV4-lgkSDEj4IOUG5fjDy3KdLwJjY">
    <input type="hidden" name="form_id"  value="basic_cart_add_to_cart_quantity_form_52">
  </div>
</form>

<button class="button">Click</button>

Answer 3

Try .click()

$('.button').click(function(){
 var idArr = [22, 35, 37, 52]

 for(var i = 0; i < idArr.length; i++) {
   var selector = 'form#basic-cart-add-to-cart-quantity-form-'+idArr[i];
   $(selector).click();  
 }
});