Как отправлять в ajax функцию вместе id продукта и его quantity?

Question

[AlexAll]

Делаю кнопку для добавления товара в корзину, пример взял в opencart там примерно такой html код

<div class="button-group">
<div class="number">
    <span class="minus">
        <button type="button" class="btn_my btn-cart-quantity btn-number" data-type="minus" data-field="count">
            <span class="glyphicon glyphicon-minus"> </span>
        </button>
                
    </span>
    <input class="input_quantity" name="quantity" type="text" value="1" size="1"/>
    <span class="plus"> <button type="button" class="btn_my btn-cart-quantity btn-number" data-type="minus" data-field="count">
            <span class="glyphicon glyphicon-plus"> </span>
        </button></span>
</div>


<br/>
 <input type="hidden" name="product_id" value="<?= $id?>">
 <button class = "btn btn-cart" type="button" onclick="cart.add(<?= $id?>);">В корзину</button>
            
</div>

js вот такой

var cart = {
	'add': function(product_id, quantity) {  
            console.log(quantity);
		$.ajax({
			url: '/cart/add',
			type: 'post',
			data: 'id=' + product_id + '&quantity=' + (typeof(quantity) !== 'undefined' ? quantity : 1),

product_id в эту функцию попадает, а quantity = undefined поэтому в data он всегда принимает значение 1
Почему quantity = undefined ? почему не доходит его значение? весь opencart перерыл так и не понял как там это устроено, но в нем как то quantity передается при нажатии на эту кнопку В корзину

Что я делаю не так?

Answer 1

[ThunderCat]

1) функция у вас должна принимать 2 аргумента, вы ей передаете 1. Соответственно второй аргумент андефайнед.
2) для того чтобы получить значение квантити его передавать не надо, так как вы его заранее не знаете. Вместо этого: уберите второй аргумент в функции. Вместо этого используйте this как опорный объект, от него находите парент (это будет див оборачивающий ваш блок, в вашем случае div.button-group), и в нем ищете .input_quantity.val()(это будет количество ) и вот его уже передаете в параметрах аякса.

Comments

[AlexAll]

Спасибо, сейчас буду пробовать, тоже думал об этом, но просто увидел как реализовано в opencart решил попробовать так же, но так и не понял как там передается quantity, там точно такойже html и js что я привел выше

[ThunderCat]

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

[AlexAll]

ThunderCat, Html код там один в один что я привел, скорее всего где то там есть js которые привязывает к этой кнопке quantity

<button class = "btn btn-cart" type="button" onclick="cart.add(<?= $id?>);">В корзину</button>

Ладно спасибо, буду использовать этот вариант

onclick="cart.add(<?= $id?>, document.querySelector('.input_quantity').value);"

[ThunderCat]

AlexAll, я думаю у вас получится фигня при наличии более одного товара на странице ). С одним товаром будет работать нормально.

[AlexAll]

ThunderCat, Да я в курсе))) я просто как пример привел, на самом деле будет вот так

<button class = "btn btn-cart" type="button" onclick="cart.add(<?= $id?>, document.querySelector('#quantity-<?= $id?>').value);">В корзину</button>

А в самом input quantity я добавил его айдшинк

<input id="quantity-<?= $id?>" class="input_quantity" name="quantity" type="text" value="1" size="1"/>

И все отлично пашет

Answer 2

[DanKud]

onclick="cart.add(<?= $id?>, document.querySelector('.input_quantity').value);"

Comments

[AlexAll]

Спасибо, буду пробовать

[ThunderCat]

будет работать только если товар на страничке один.

[DanKud]

ThunderCat, если несколько товаров, то можно просто присвоить тот же самый id:

<input id="<?=$id?>" class="input_quantity" name="quantity" type="text" value="1" size="1"/>

onclick="cart.add(<?= $id?>, document.querySelector('#<?=$id?>').value);"

Answer 3

[Alex]

Ну вот почему

onclick="cart.add(<?= $id?>);"

Это вызывается вот так
cart.add(123);
Второго параметра нет

Comments

[AlexAll]

потому что тут <?= $id?> айдишник товара

Answer 4

[glite]

var cart = {
'add': function(product_id) {
$.ajax({
url: '/cart/add',
type: 'post',
data: {'id': product_id, 'quantity:'$('[name="quantity"]').val()}
}) ;

Comments

[ThunderCat]

и что это? То есть всегда будет 1? Человеку нужно получить количество из поля input_quantity, зачем эти пляски с несуществующим параметром?