change the value of a qantity field with jquery

Question

Hi eveyone

I have form with multiple qty fields,I'd like to add the qty but pressing the add button and subtract the qty by pressing minus button, I got it working for one but I can not make it work for multiple qty fields,I have 24 qty fields, any help would be appreciate it.

     <form>
            <input name="minus1" type="button" class="button" id="minus1" value=" - " />
            <input name="textfield1" type="text" id="textfield1" size="2" maxlength="2" value="0" />
           <input name="add1" type="button" class="button" id="add1" value=" + " />

           <input name="minus2" type="button" class="button" id="minus2" value=" - " />
            <input name="textfield2" type="text" id="textfield2" size="2" maxlength="2" value="0" />
           <input name="add2" type="button" class="button" id="add2" value=" + " />

         ......
     </form>

    $(function()
{

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

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


});

Answer 1

try parseInt...

var newQty = parseInt($("#textfield1").val()) + 1;

ok actually that has nothing to do with your problem... :( sorry you need to use a loop

Step 1

add a class to each textfield like so

<input class="incremental_text_field" name="textfield1" type="text" id="textfield1" size="2" maxlength="2" value="0" />

Step 2

just add this loop to your DOM-ready function (based on your existing code)

$(".incremental_text_field").each(function() {
    field_number = $(this).attr("id").replace("textfield", "");

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

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

Answer 2

Try to assign classes to the inputs. Then you do not have to repeat the script x(24) times

 <input name="minus1" type="button" class="button minus" value=" - " />
 <input name="textfield1" type="text" class="text" size="2" maxlength="2" value="0" />
 <input name="add2" type="button" class="button add" value=" + " />

 <input name="minus2" type="button" class="button minus" value=" - " />
 <input name="textfield2" type="text" class="text" size="2" maxlength="2" value="0" />
 <input name="add2" type="button" class="button add"  value=" + " />

js

//N.B need to ensure input is numerical also

$('input.add').live('click', function(){

    var $textInput = $(this).prev();
    $textInput.val( $textInput.val() + 1 );

});

$('input.minus').live('click', function(){

    var $textInput = $(this).next();
    var newQty = $textInput.val() - 1;
    newQty > 0 ? $textInput.val(newQty) : $textInput.val(0)

});

Answer 3

Why not try something like this:

<form>
  <input name="textfield1" type="text" class="quantity" size="2" maxlength="2" value="0" />
  <input name="textfield2" type="text" class="quantity" size="2" maxlength="2" value="0" />
  <input name="textfield3" type="text" class="quantity" size="2" maxlength="2" value="0" />
  ...
  <input name="textfieldn" type="text" class="quantity" size="2" maxlength="2" value="0" />
</form>

...

$(document).ready(function() {
  $('input.quantity').each(function() {
    $field = $(this);
    $field.before(
      $('<input>').attr('type', 'button').val(' - ').bind('click', function() {
        var newVal = parseInt($field.val()) - 1;
        if (newVal < 0)
          newVal = 0;
        $field.val(newVal);
      })
    );
    $field.after(
      $('<input>').attr('type', 'button').val(' + ').bind('click', function() {
        var newVal = parseInt($field.val()) + 1;
        if (newVal < 0)
          newVal = 0;
        $field.val(newVal);
      })
    );
  });
});

Answer 4

I assume he wants to group the buttons so that one minus/plus button works on one field etc.

Well, first I'd make the id into classes and group the elements in HTML using the fieldset:

<form>
  <fieldset>
    <input name="minus1" type="button" class="button minus" value=" - " />
    <input name="textfield1" type="text" class="valfield" size="2" maxlength="2" value="0" />
    <input name="add1" type="button" class="button add" value=" + " />
  </fieldset>
  <fieldset>
    <input name="minus2" type="button" class="button minus" value=" - " />
    <input name="textfield2" type="text" class="valfield" size="2" maxlength="2" value="0" />
    <input name="add2" type="button" class="button add" value=" + " />
  </fieldset>
</form>

Then I'd make the jquery work with siblings:

$(function()
{
  $(".add").click(function(){
    var newQty =+($(this).siblings(".valfield").val()) + 1;
    $(this).siblings(".valfield").val(newQty);
  });

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

Hopefully what you were looking for :)