Как увеличить значение поля количества с помощью jQuery?

Question

У меня есть форма с некоторым количеством поля и знаком плюс и минус на каждой стороне,

    <form id="myform">
        product1
        <input type="submit" value="+" id="add">
        <input type="text" id="qty1">
        <input type="submit value="-" id="minus">
        product2
        <input type="submit" value="+" id="add">
        <input type="text" id="qty2">
        <input type="submit value="-" id="minus">
    </form>

Я бы хотел увеличить значение поля на единицу, если добавить кнопка нажата и уменьшается на единицу при нажатии на минус. Также значение не должно быть меньше 0.

Есть ли способ сделать это в jQuery?

Answer 1

Прежде всего, type="submit" должен быть type="button" во всех случаях. Кроме того, вы не можете иметь два элемента с одинаковым идентификатором; Я предполагаю, что вы хотите add1, minus1, add2, minus2 и т. Д.

Следующий код jQuery должен отлично работать.

$(function () {
    var numButtons = 10;
    for (var i = 1; i <= numButtons; ++i) {
        $("#add" + i).click(function () {
            var currentVal = parseInt($("#qty" + i).val());
            if (!isNaN(currentVal)) {
                $("#qty" + i).val(currentVal + 1);
            }
        });

        $("#minus" + i).click(function () {
            var currentVal = parseInt($("qty" + i).val());
            if (!isNaN(currentVal) && currentVal > 0) {
                $("#qty" + i).val(currentVal - 1);
            }
        });
    }
});

Стоит отметить:

• Я обертываю все в вызове $(function() { ... }), чтобы вы прикрепляли обработчики событий только после загрузки страницы. (В частности, после события DomContentLoaded.) Это предотвращает ошибки о том, что объект с идентификатором «add1» не существует или что-либо еще, потому что технически этот объект не существует, пока страница фактически не загружается.
• Проверяет NaN обрабатывает случай, когда пользователь вводит не числовые данные в поле. Вы можете добавить свою собственную логику для этого, в частности, например, автоматическое преобразование нечисловых свойств в 0 всякий раз, когда кто-то нажимает кнопку добавления или минус.

Answer 2

Я новичок, но я сделал это для целых чисел ...

<div class="quantityInput" min="-32" max="32">
    <input type="text" class="quantityText">
    <input type="button" value="+" class="quantityPlus">
    <input type="button" value="-" class="quantityMinus">
</div>

атрибуты min и max являются необязательными. Затем внутри jQuery (документ) .ready (...

$(".quantityMinus").live("click", function() {
  var qInput = $(this).parents(".quantityInput");
  var qText = qInput.find(".quantityText");
  var qValue = parseInt((qText.val())? qText.val() : 0);
  qText.val(Math.max(qValue - 1, (qInput.attr("min"))? qInput.attr("min") : -0xffff));
});

$(".quantityPlus").live("click", function() {
  var qInput = $(this).parents(".quantityInput");
  var qText = qInput.find(".quantityText");
  var qValue = parseInt((qText.val())? qText.val() : 0);
  qText.val(Math.min(qValue + 1, (qInput.attr("max"))? qInput.attr("max") : 0xffff));
});

Answer 3

Ваш HTML не совсем корректен, у вас есть несколько элементов с одинаковым идентификатором, он должен быть уникальным. Но допустим, у вас был только один набор входов / кнопок:

$("#add").click(function(){
  var newQty = +($("#qty1").val()) + 1;
  $("#qty1").val(newQty);
});

$("#minus").click(function(){
  var newQty = +($("#qty1").val()) - 1;
  if(newQty < 0)newQty = 0;
  $("#qty1").val(newQty);
});

Answer 4

Это улучшенный ответ первого ответа:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function()
{
    $(".add").click(function()
    {
        var currentVal = parseInt($(this).next(".qty").val());
        if (currentVal != NaN)
        {
            $(this).next(".qty").val(currentVal + 1);
        } 
    });

    $(".minus").click(function()
    {
        var currentVal = parseInt($(this).prev(".qty").val());
        if (currentVal != NaN)
        {
            $(this).prev(".qty").val(currentVal - 1);
        }
    });
});

</script>
</head>

<body>
    <form id="myform">
        product1
        <input type="button" value="+" id="add1" class="add" />        
        <input type="text" id="qty1" value="-1" class="qty" />        
        <input type="button" value="-" id="minus1" class="minus" /><br /><br />

        product2
        <input type="button" value="+" id="add2" class="add" />        
        <input type="text" id="qty2" value="-10" class="qty" />        
        <input type="button" value="-" id="minus2" class="minus" />

    </form>

</body>

Я надеюсь, что они служат ....: D

Answer 5

Вы должны использовать уникальный идентификатор для всех ваших входов, например, qty1_add, qty1_minus. Затем вы можете прикрепить событие нажатия к этим кнопкам:

$("#qty1_add").click( function() {
   $("#qty1").val( parseInt($("#qty1").val()) + 1);
}).

Answer 6

Большое спасибо всем, кто ввязался. Все, на что я опирался и смог придумать, в конце концов, это очень хорошо послужило сайту (это была только CSS, это было боль!)

HTML:

<div id="qtybox"><label for="qty">
<venda_text id=site.quantity>
</label><input name="qty" id="qty" type="text" value="1" size="3" maxlength="2"></input>
<button id="qtyplus" onclick="return false"></button>
    <button id="qtyminus" onclick="return false"></button>

</div>

ЯШ:

jQuery(function(){
    jQuery("#qtyplus").click(function(){     
     jQuery(":text[name='qty']").val( Number(jQuery(":text[name='qty']").val()) + 1 );
    });
    jQuery("#qtyminus").click(function(){
     if(jQuery('#qty').val()>1)
      jQuery(":text[name='qty']").val( Number(jQuery(":text[name='qty']").val()) - 1 );

    });
  });

CSS:

#qtybox button#qtyplus {
    background: url("../images/social_icons/elements.png") no-repeat scroll -268px -223px   
    transparent;
    border: medium none;
    cursor: pointer;
    display: block;
    float: right;
    height: 23px;
    width: 23px;
}

Как вы можете видеть, я удалил значения + и - ненавидел то, как он был представлен!

Answer 7

Я думаю, что это должно сделать это:

$('#add').click(function (e) {
    var quant = $(this).next('input');
    quant.val(parseInt(quant.val(), 10) + 1);
};
$('#minus').click(function (e) {
    var quant = $(this).prev('input');
    quant.val(parseInt(quant.val(), 10) - 1);
    if (parseInt(quant.val(), 10) < 0)
    { quant.val(0); }
};

Это, однако, зависит от того, что относительное расположение элементов управления не меняется.

Answer 8

Во-первых, для кнопок минус необходимо указать type = "submit", а не type = "submit", но я предполагаю, что это ошибка ввода;)

Если вы хотите это сделать, вы должны изменить идентификаторы кнопок плюс и минус на что-то вроде 'minus-qty1', 'add-qty1' и т. Д., Чтобы определить, какой вход вы хотите обновить.

  <form id="myform">
    product1
    <input type="button" value="+" id="add-qty1" onclick="increase(this)">
    <input type="text" id="qty1">
    <input type="button" value="-" id="minus-qty1" onclick="decrease(this)">
    product2
    <input type="button" value="+" id="add-qty2" onclick="increase(this)">
    <input type="text" id="qty2">
    <input type="button" value="-" id="minus-qty2" onclick="decrease(this)">

  </form>

function increase(button)
{
 var id = $(button).attr('id');
 var fname = id.substr(3);

 var newval = parseInt($("#"+fname).val()) + 1;
 $("#" + fname).val(newval);
}


function decrease(button)
{
 var id = $(button).attr('id');
 var fname = id.substr(5);

 var newval = parseInt($("#"+fname).val()) - 1;
 $("#" + fname).val(newval);
}

Я надеюсь, что это работает, я не пробовал:)