Кастомные кнопки для 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
Oleg
16 марта 2019, 18:35
modx.pro
1 803
0

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

Евгений Webinmd
Евгений 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
    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
        Oleg
        17 марта 2019, 17:23
        0
        Подскажи а где может закрасться ошибка? Как считаешь?
          Oleg
          Oleg
          17 марта 2019, 17:38
          0
          Понял каким образом происходит ошибка. Кнопка добавляет кол-во единиц в соответствии с количеством товаров стоящих после нынешнего товара.
            Oleg
            Oleg
            17 марта 2019, 18:28
            0
            Всё, разобрался. Затупил конкретно. Добавил JS в шаблон для каждого товара в корзине, хотел немного облегчать участь сайта не нагружая каждую страничку лишним кодом, но увы. Потому что код дублировался после каждого добавленного товара он и начал не правильно работать. Спасибо всем ребята! Огромное Спасибо!
          Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
          7