如何通过选择期权数量字段正确替换数量的输入字段?

时间:2016-08-15 11:14:34

标签: javascript php jquery html opencart

我有一个addtocart按钮,其数量输入字段在我的网站上正常运行(见下图):

Working add to cart

当我在输入字段中引入示例2并按下addtocart按钮时,我的购物车会更新2个项目。

但我想通过下拉字段更改数量输入字段,以便访问者只能在下拉列表中选择一个允许的数量。我可以正确配置下拉字段,但是当我点击addtocart按钮(见下图)时,没有任何反应。

Not working select field

我想我需要改变"输入"通过"选择"在javascript的某个地方。或者也许javascript中的数量或按钮没有正确传输?

经过一些试验,我无法让它运转起来。

有人可以帮我这个吗?我会很高兴(总是挣扎着javascript)

感谢。

输入字段(工作)的html代码是:

<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>
        <? } ?>

&#34;选择选项&#34;的html代码字段,正确配置但无法正常工作:

<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>                       
<? } ?>

用于addtocart按钮的javascript代码:

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

1 个答案:

答案 0 :(得分:1)

你应该改变这行代码:

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

到:

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

只需将select元素添加到数据中,使用您想要的类或ID。