Кастомные кнопки для input

Здравствуйте!

Помогите пожалуйста, как сделать кастомизированые кнопки для input?
Пробовал добавлять изменение значения через JS, но разумеется значение не сохранялось и не фиксировалось самой корзиной.
<td class="count">
                            <form method="post" class="ms2_form form-inline" role="form">
                                <input type="hidden" name="key" value="{$product.key}"/>
                                <div class="form-group">
                                     <button class="form-group__minus">-</button>
                                    <input class="form-group__number" type="number" name="count" value="{$product.count}"/>
                                    <button class="form-group__plus">+</button>
                                </div>
                                    <button class="btn btn-default" type="submit" name="ms2_action" value="cart/change"></button>
                                
                            </form
 </td>

<script type="text/javascript">
                        	    $(function() {
                         
                          (function quantityProducts() {
                            var $quantityArrowMinus = $("#{$product.key} .form-group__minus");
                            var $quantityArrowPlus = $("#{$product.key} .form-group__plus");
                            var $quantityNum = $("#{$product.key} .form-group__number");
                         
                            $quantityArrowMinus.click(quantityMinus);
                            $quantityArrowPlus.click(quantityPlus);
                         
                            function quantityMinus() {
                              if ($quantityNum.val() > 1) {
                                $quantityNum.val(+$quantityNum.val() - 1);
                              }
                            }
                         
                            function quantityPlus() {
                              $quantityNum.val(+$quantityNum.val() + 1);
                            }
                          })();
                         
                        });
</script>
Буду благодарен за помощь!
Oleg
16 марта 2019, 18:35
modx.pro
1 834
0

Комментарии: 7

Евгений Webinmd
16 марта 2019, 22:31
3
+1
у меня такой код

js
$('.bminus').on('click',function () {
    var $input = $(this).parent().find('input');
    var val = +$input[0].defaultValue;
    var count = parseInt($input.val()) - 1;
    count = count < 1 ? 1 : count; 
    $input.val(count);
    $input.change();
    return false;
});

$('.bplus').on('click',function () {
    var $input = $(this).parent().find('input');
    var val = +$input[0].defaultValue; 
    $input.val(parseInt($input.val()) + 1);
    $input.change();
    return false;
});
html
<div class="quantity">
    <input type="text" name="count" value="1"  required>
    <span class="bplus"></span>
    <span class="bminus"></span>
</div>
    Oleg
    17 марта 2019, 14:25
    0
    Работает но как то странно. На некоторых товарах в корзине прибавляет по 3, 2, 4, 5 единиц за одно нажатие. На самом последнем вовсе не работает. Вне зависимости от товаров.
    Дмитрий Середюк
    16 марта 2019, 23:22
    4
    +1
    <form method="post" class="ms2_form form-inline" role="form">
        <input type="hidden" name="key" value="{$product.key}"/>
        <div class="number-item">
            <button class="minus">-</button>
                <input type="num" class="amout" data-amout="amout" data-min="1" data-max="9999" name="count" value="{$product.count}">
            <button class="plus">+</button>
        </div>
        <button class="btn btn-default" type="submit" name="ms2_action" value="cart/change"></button>
    </form>
    
    function itemCount(field){
        var fieldCount = function(el) {
            var
    	    // Мин. значение
    	    min = el.data('min') || false,
    	    // Макс. значение
    	    max = el.data('max') || false,
    	    // Кнопка уменьшения кол-ва
    	    dec = el.prev('.minus'),
    	    // Кнопка увеличения кол-ва
    	    inc = el.next('.plus');
    	function init(el) {
    	    if(!el.attr('disabled')){
    		dec.on('click', decrement);
    		inc.on('click', increment);
    	    }
    	    // Уменьшим значение
    	    function decrement() {
    		var value = parseInt(el[0].value);
    		value--;
    		if(!min || value >= min) {
    		    el[0].value = value;
    	         }
    	    }
    	   // Увеличим значение
    	   function increment() {
    		var value = parseInt(el[0].value);
    		value++;
    		if(!max || value <= max) {
    		    el[0].value = value++;
    		}
    	    }
    	}
    	el.each(function() {
    	    init($(this));
    	});
        };
        $(field).each(function(){
            fieldCount($(this));
        });
     } itemCount('[data-amout="amout"]');
      Дмитрий Середюк
      17 марта 2019, 15:20
      0
      Рабочий пример сайта, где реализовано
      Все рубит ок!
        Oleg
        17 марта 2019, 17:23
        0
        Подскажи а где может закрасться ошибка? Как считаешь?
          Oleg
          17 марта 2019, 17:38
          0
          Понял каким образом происходит ошибка. Кнопка добавляет кол-во единиц в соответствии с количеством товаров стоящих после нынешнего товара.
            Oleg
            17 марта 2019, 18:28
            0
            Всё, разобрался. Затупил конкретно. Добавил JS в шаблон для каждого товара в корзине, хотел немного облегчать участь сайта не нагружая каждую страничку лишним кодом, но увы. Потому что код дублировался после каждого добавленного товара он и начал не правильно работать. Спасибо всем ребята! Огромное Спасибо!
          Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
          7