CODEWITHSUNDEEP
javascriptphpjqueryhtmlopencart
SabKo
SabKo

Reputation: 57

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');
        }
    }
});
});

Upvotes: 0

Views: 1597

Answers (1)

Sasan Farrokh
Sasan Farrokh

Reputation: 190

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.

Upvotes: 1

Related Questions