如何通过选择选项数量字段正确替换输入字段的数量?
问题描述:
我有与被适当地在我的网站起作用的数量输入字段的addtocart按钮(参见下图):如何通过选择选项数量字段正确替换输入字段的数量?
当我在输入字段中引入例如在2和推addtocart按钮,我的购物车获取更新2项。
但我想通过下拉字段更改数量输入字段,以便访问者只能从下拉列表中选择一个允许的数量。我可以正确配置下拉字段,但是当我点击addtocart按钮时(见下图),什么都不会发生。
我想我需要改变“输入”,“选择”在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>
<? } ?>
对于 “选择选项” 字段中的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>
<? } ?>
JavaScript的该用于addtocart按钮的代码:
$('.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">×</button></div>');
}
$('#cart-total').html(json['total']);
$('html, body').animate({ scrollTop: 0 }, 'slow');
$('#cart ul').load('index.php?route=common/cart/info ul li');
}
}
});
});
答
你应该改变这行代码:
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'),
只是选择元素添加到数据,你要不断class和id。
Hello Sasan,非常感谢!您的代码现在可以正常工作。当我看到脚本后,似乎总是如此逻辑......关心,SabKo – SabKo