DenysM DenysM - 2 months ago 13
jQuery Question

Button click other buttons

$('.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

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>