jQuery spinner type thing

Question

I'm trying to create a jQuery spinner type thing earlier today somebody gave me this code which increases the text field value up/down on button clicks. Fantastic. But what do you do to disable the .desc button if the value is 0 - zero. In PHP very easy if if <=0 then this etc... but I don't know jQuery..

Also any ideas how it can be used to move up/down an unordered html list i.e. ul li?

$(document).ready(function() 
{   
    $(function()
    {
        $(".inc").click(function() 
        { 
            $(":text[name='qty']").val(Number($(":text[name='qty']").val()) + 1);
        }); 

        $(".dec").click(function()
        {      
            $(":text[name='qty']").val(Number($(":text[name='qty']").val()) - 1);
        });  
    });
});

This uses a form:

<input type="text" name="qty" value="0" />
<img src="img/up.png" class="inc" width="20px" height="9px" alt="Increase" title="increase" />
<img src="img/down.png" class="dec" width="20px" height="9px" alt="Decrease" title="Decrease" />

Answer 1

uhm jQuery is still javascript, so why don't you use

$(".dec")
    .click(
        function(){
            if(Number($(":text[name='qty']").val() > 0)
            {
                $(":text[name='qty']")
                    .val( Number($(":text[name='qty']").val()) - 1 
                );
            }
         }
     );

I mean, javascript has if's. If i understood you correctly

Answer 2

Since the code uses an image instead of a button or input element, you can't truly disable it. The easiest thing to do would be to hide it which would be:

$(":text[name='qty']").change(function() {
    if($(this).val() <= 0) {
        $(".dec").hide();
    } else {
        $(".dec").show();
    }
}):

If you change the decrement "button" to an input or button element, you could change the function code to:

    if($(this).val() <= 0) {
        $(".dec").attr('disabled','disabled');
    } else {
        $(".dec").removeAttr('disabled');
    }

Answer 3

here is my code,

$(document).ready(function () {
  var textElem = $(":text[name='qty']"),
      getTextVal = function() {
        var val = parseInt(textElem.val(), 10);
        return isNaN(val) ? 0 : val;
      };

  $(".inc").click(function () {
      textElem.val(getTextVal() + 1);
  });

  $(".dec").click(function(){
      if( getTextVal() == 0) {
         return false;
      }

      textElem.val(getTextVal() - 1);
  });
});

The image '.dec' stops decrementing as the value of the text element reaches 0, you can dynamically add and remove the class name(s) to the image so that the user can notice the transition.

It is suggested to use buttons for this purpose and they can be styled with css to appear as required.

This is not the optimized code, but should give you an idea of how to get it working as per ur requirements.

Answer 4

Using separate functions to handle the increment and decrement from a spinner. The disabling will only work on form elements, but since you are representing the spinner controls using images, you could call .hide() and .show() on those, or skip the action in the calls to increment and decrement.

function increment() {
    var textField = $(":text[name='qty']");
    var value = Number(textField.val()) + 1;
    textField.val(value);
}

function decrement() {
    var textField = $(":text[name='qty']");
    var value = Number(textField.val()) - 1;
    textField.val(value);
    if(value == 0) {
        $(".dec").attr("disable", "disable");
    }
}

$(document).ready(function() {
    $(".inc").click(increment);
    $(".dec").click(decrement);
});

You can use this spinner to go up or down an unordered list, but you will have to keep track of the current position in the list. The decrement function already takes care of not going below 0. The increment needs to be disabled as well if you're at the last item in the list. Something like this should work:

if(current == $("#list > li").size() - 1) {
    $(".inc").attr("disable", "disable");
}

Of course, these have to be re-enabled when the value changes again. But I'm sure you can do that.