This question has already been answered:

Hello!

When adding goods to the basket, the user has the opportunity to set an arbitrary number of goods before adding.

I need the following: by clicking on the "Add to cart" button of a specific product - to take from it the same quantity of goods that the user has entered.

In my case, the number of goods is always added to the same product, regardless of which product clicked. I check this with alert() . In the example, everything is shown. Look here please.

Please tell me how it is possible to solve this problem.

 $('.add-to-cart').on('click', function(e) { var that = $(this), shows = parseInt(that.attr("data-show"), 10), add = that.attr("data-text"), qty = parseInt($('#qty').val(), 10); alert(qty); if (shows == 0) { e.preventDefault(); that.attr("data-show", "1"); that.text(add); that.closest('.catalog-tovarov').find('#mot').show(); } }); 
 .catalog-tovarov { display: inline-block; vertical-align: top; text-align: center; margin: 0 0 20px 11px; width: 150px; height: 230px; padding: 1%; transition: 0.4s 0.2s ease; background: #cfcfcf; } .catalog-tovarov:hover { box-shadow: 0 4px 9px 0 #CECECE; } .price { margin-top: 120px; } #mot { display: none; text-align: right; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="catalog-tovarov"> <div id="mot"><img width="30px" src="http://sparkysite.ru/small/check/check03/scheck264.png" /></div> <div class="price"> <input id="qty" type="text" name="quant" value="3" /> <span>444 Ρ€ΡƒΠ±.</span><br/> <a class="add-to-cart" data-price="10000" data-show="0" data-text="ΠŸΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ Π² ΠΊΠΎΡ€Π·ΠΈΠ½Ρƒ" href="#">Π’ ΠΊΠΎΡ€Π·ΠΈΠ½Ρƒ</a> </div> </div> <div class="catalog-tovarov"> <div id="mot"> <img width="30px" src="http://sparkysite.ru/small/check/check03/scheck264.png" /> </div> <div class="price"> <input id="qty" type="text" name="quant" value="2" /> <span>444 Ρ€ΡƒΠ±.</span><br/> <a class="add-to-cart" data-price="10000" data-show="0" data-text="ΠŸΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ Π² ΠΊΠΎΡ€Π·ΠΈΠ½Ρƒ" href="#">Π’ ΠΊΠΎΡ€Π·ΠΈΠ½Ρƒ</a> </div> </div> <div class="catalog-tovarov"> <div id="mot"> <img width="30px" src="http://sparkysite.ru/small/check/check03/scheck264.png" /> </div> <div class="price"> <input id="qty" type="text" name="quant" value="6" /> <span>444 Ρ€ΡƒΠ±.</span><br/> <a class="add-to-cart" data-price="10000" data-show="0" data-text="ΠŸΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ Π² ΠΊΠΎΡ€Π·ΠΈΠ½Ρƒ" href="#">Π’ ΠΊΠΎΡ€Π·ΠΈΠ½Ρƒ</a> </div> </div>

Reported as a duplicate by members user207618, user194374, Denis Bubnov , ermak0ff , vp_arth 21 Feb '17 at 15:53 .

A similar question was asked earlier and an answer has already been received. If the answers provided are not exhaustive, please ask a new question .

  • one
    Do not set the same id different elements: qty = parseInt($(this).closest('.price').find('.qty').val(), 10); . Well: <input class="qty" ... Same for id="mot" . - Igor
  • @Igor Thank you! And why, if in <div class="price"> to attach another div <div class="price"><div class="qwerty"><input class="qty" ... and then when referring to parseInt($(this).closest('.qwerty').find('.qty').val(), 10); does not work? - Dmitriy
  • @Igor Example by reference : I really have this layout :) - Dmitry
  • one
    because ".qwerty" is not in the parent chain ".add-to-cart" api.jquery.com/closest - Igor
  • @Igor Suggest your answer, what was written first comment. I will note how correct. - Dmitriy

1 answer 1

The first is to not use the same id on the page, use the classes instead.

The second is that you didn’t specify how, in which block to look for the quantity, in your case you can do .siblings (), but this is not recommended, because then too much dependency on the layout, it is better to find the beginning of the block and the necessary element in it, I made it so that I changed your code smaller.

Third, I did not fix it, but I don’t need to access data via attr.

 $('.add-to-cart').on('click', function(e) { var that = $(this), shows = parseInt(that.attr("data-show"), 10), add = that.attr("data-text"), qty = parseInt(that.siblings('.qty').val(), 10); alert(qty); if (shows == 0) { e.preventDefault(); that.attr("data-show", "1"); that.text(add); that.closest('.catalog-tovarov').find('.mot').show(); } }); 
 .catalog-tovarov { display: inline-block; vertical-align: top; text-align: center; margin: 0 0 20px 11px; width: 150px; height: 230px; padding: 1%; transition: 0.4s 0.2s ease; background: #cfcfcf; } .catalog-tovarov:hover { box-shadow: 0 4px 9px 0 #CECECE; } .price { margin-top: 120px; } .mot { display: none; text-align: right; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="catalog-tovarov"> <div class="mot"><img width="30px" src="http://sparkysite.ru/small/check/check03/scheck264.png" /></div> <div class="price"> <input class="qty" type="text" name="quant" value="3" /> <span>444 Ρ€ΡƒΠ±.</span><br/> <a class="add-to-cart" data-price="10000" data-show="0" data-text="ΠŸΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ Π² ΠΊΠΎΡ€Π·ΠΈΠ½Ρƒ" href="#">Π’ ΠΊΠΎΡ€Π·ΠΈΠ½Ρƒ</a> </div> </div> <div class="catalog-tovarov"> <div class="mot"> <img width="30px" src="http://sparkysite.ru/small/check/check03/scheck264.png" /> </div> <div class="price"> <input class="qty" type="text" name="quant" value="2" /> <span>444 Ρ€ΡƒΠ±.</span><br/> <a class="add-to-cart" data-price="10000" data-show="0" data-text="ΠŸΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ Π² ΠΊΠΎΡ€Π·ΠΈΠ½Ρƒ" href="#">Π’ ΠΊΠΎΡ€Π·ΠΈΠ½Ρƒ</a> </div> </div> <div class="catalog-tovarov"> <div class="mot"> <img width="30px" src="http://sparkysite.ru/small/check/check03/scheck264.png" /> </div> <div class="price"> <input class="qty" type="text" name="quant" value="6" /> <span>444 Ρ€ΡƒΠ±.</span><br/> <a class="add-to-cart" data-price="10000" data-show="0" data-text="ΠŸΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ Π² ΠΊΠΎΡ€Π·ΠΈΠ½Ρƒ" href="#">Π’ ΠΊΠΎΡ€Π·ΠΈΠ½Ρƒ</a> </div> </div>

  • Thank you very much, I will try later in my project. Please tell me why you can not use the same id on the page? And why don't you need to access data through attr? - Dmitriy