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

问题描述:

我有与被适当地在我的网站起作用的数量输入字段的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> 
     <? } ?> 

对于 “选择选项” 字段中的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">&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'); 
     } 
    } 
}); 
}); 

你应该改变这行代码:

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。

+0

Hello Sasan,非常感谢!您的代码现在可以正常工作。当我看到脚本后,似乎总是如此逻辑......关心,SabKo – SabKo