SabKo SabKo - 3 months ago 10
PHP Question

How to correctly replace input field for quantity by select option quantity field?

I have an addtocart button with a quantity input field that is properly functioning in my website (see image below):

Working add to cart

When I introduce for example 2 in the input field and push the addtocart button, my cart gets updated with 2 items.

But I want to change the quantity input field by a dropdown field so the visitor can only select one of the allowed quantities in the dropdown list. I can get dropdown field properly configured, but when I click on the addtocart button (see image below), nothing happens.

Not working select field

I suppose I need to change "input" by "select" somewhere in the javascript. Or maybe the quantity or button in the javascript is not correctly transmitted?

I can't get it working after some trials.

Can anybody help me with this? I would be very pleased (always struggling with javascript)

Thanks.

The html code for the input field (working) is:

<input type="hidden" value="<?=$product['product_id']?>" size="2" name="product_id" />
<input type="hidden" value="<?=$product['gift_products_id']?>" size="2" name="gift_products_id" />
<? if($product['quantity']!==$product['total']){ ?>
<input type="text" value="1" size="2" name="quantity" />
<a class="btn btn-primary addtocart" lang="<?=$product['product_id']?>" href="javascript:void(0)" ><span><?=$_['gr_m_add_to_cart']?></span></a>
<? } ?>


The html code for the "select option" field, properly configured but not working is:

<input type="hidden" value="<?=$product['product_id']?>" size="2" name="product_id" />
<input type="hidden" value="<?=$product['gift_products_id']?>" size="2" name="gift_products_id" />
<? if($product['quantity']!==$product['total']){ ?>
<select name="quantity" class="form-control_cart" id="input-quantity" value="1" >
<?php foreach (range(1, $product['quantity'], 1) as $stap) {
if ($stap == 1) {
echo "<option value='$stap' selected>$stap</option>";
} else {
echo "<option value='$stap'>$stap</option>";
}
} ?>
</select>
<a class="btn btn-default addtocart" style="margin-top:-4px" lang="<?=$product['product_id']?>" href="javascript:void(0)" data-toggle="tooltip" title="<?=$_['gr_m_add_to_cart']?>"><i class="fa fa-shopping-cart"></i></a>
<? } ?>


The javascript code that is used for the addtocart button:

$('.addtocart').click(function() {
id = $(this).attr('lang');
$.ajax({
url: 'index.php?route=checkout/cart/add',
type: 'post',
data: $('#row_'+id+' input[type=\'text\'], #row_'+id+' input[type=\'hidden\']'),
dataType: 'json',
beforeSend: function() {
//$('#button-cart').button('loading');
$('.addtocart').button('loading');
},
complete: function() {
//$('#button-cart').button('reset');
$('.addtocart').button('reset');
},
success: function(json) {
$('.alert, .text-danger').remove();
$('.form-group').removeClass('has-error');

if (json['error']) {
if (json['error']['option']) {
for (i in json['error']['option']) {
var element = $('#input-option' + i.replace('_', '-'));

if (element.parent().hasClass('input-group')) {
element.parent().after('<div class="text-danger">' + json['error']['option'][i] + '</div>');
} else {
element.after('<div class="text-danger">' + json['error']['option'][i] + '</div>');
}
}
}

if (json['error']['recurring']) {
$('select[name=\'recurring_id\']').after('<div class="text-danger">' + json['error']['recurring'] + '</div>');
}

// Highlight any found errors
$('.text-danger').parent().addClass('has-error');
}

if (json['success']) {
if (!Journal.showNotification(json['success'], json['image'])) {
$('.breadcrumb').after('<div class="alert alert-success success">' + json['success'] + '<button type="button" class="close" data-dismiss="alert">&times;</button></div>');
}

$('#cart-total').html(json['total']);

$('html, body').animate({ scrollTop: 0 }, 'slow');

$('#cart ul').load('index.php?route=common/cart/info ul li');
}
}
});
});



Answer

you should change this line of code :

 data: $('#row_'+id+' input[type=\'text\'], #row_'+id+' input[type=\'hidden\']'),

to :

 data: $('#row_'+id+' input[type=\'text\'], #row_'+id+' input[type=\'hidden\'], #row_'+id+' select'),

just add the select element to the data , with ever class or id you want.

Comments