1

What I have:

I have a readonly textbox and two links. The first link increments the value of the textbox by 1 whereas the second link decrements the value by 1.

What I need:

I need the textbox value to stop decrementing at zero (I don't want negative numbers).

My code:

jQuery:

jQuery(".increment").on('click',function(){
    jQuery(this).next(".amount input").val(parseInt(jQuery(this).next(".amount input").val())+1);
});

jQuery(".decrement").on('click',function(){
    jQuery(this).prev(".amount input").val(parseInt(jQuery(this).prev(".amount input").val())-1);
});

Note: .next and .prev are used because I have multiple textboxes.

HTML:

<!--This block of code is occurs more than once.-->
<td class="amount">
    <a href="#" class="increment"></a>
    <input type="text" readonly="readonly" value="0" />
    <a href="#" class="decrement"></a>
</td>

A loose guess:

...with regards to decrementing...

// open onclick code here

    if (jQuery(this).prev(".amount input").val != "0"){

        // decrement code here

    }

// close onclick code here

Resources:

My working code is modelled on this Stack Overflow answer: https://stackoverflow.com/a/12209831/835950

...at which a fiddle exists for convenience: http://jsfiddle.net/iMaverick/S3PLG/2/

Community
  • 1
  • 1
Dominor Novus
  • 2,248
  • 5
  • 29
  • 35

2 Answers2

3

Demo

$("#down").on('click',function(){
    var value = (parseInt($("#incdec input").val() , 10) - 1);
    $("#incdec input").val((value-1) < 0 ? 0 :(value -1));
});
PSL
  • 123,204
  • 21
  • 253
  • 243
1

Almost:

$(document).ready(function() {
    var $textbox = $("#incdec input");

    $("#up").click(function(){
        var value = parseInt($textbox.val(), 10);

        $textbox.val(value + 1);
    });

    $("#down").click(function(){
        var value = parseInt($textbox.val(), 10);

        if (value > 0) {
            $textbox.val(value - 1);
        }
    });
});

HTML5 also includes an <input type="number"> element:

<input type="number" min="0" value="1" />
Blender
  • 289,723
  • 53
  • 439
  • 496
  • Thanks for the solution. Though the condition structure matches what I was attempting, I cannot manage to implement your code when I integrate .next and .prev as outlined in the example in my question. I'm additionally unsure what the 10 following the comma represents. I considered the HTML5 solution initially but opted instead for a manual solution that allows me greater control over the design. – Dominor Novus Apr 22 '13 at 05:30
  • @DominorNovus: `10` is base 10. If you don't specify the base, `parseInt()` is free to choose whatever it wants. As for your problem, you will need to provide more context. What does your actual HTML look like? – Blender Apr 22 '13 at 05:34
  • That's understandable. I didn't emphasize why I'm using .next and .prev. I've edited my question to provide the requested context. Please refer to "My code:" section, specifically the note and mark-up. You can view the working code that I was able to derive from PSCoder's answer here: http://pastebin.com/WneuWRrn – Dominor Novus Apr 22 '13 at 05:52
  • @DominorNovus: Cramming so much code into one line is a bad idea. – Blender Apr 22 '13 at 05:53
  • Are you referring to my use of .next/.prev vs writing a separate function for each textbox or are you referring to PSCoder's solution? – Dominor Novus Apr 22 '13 at 05:55
  • What are the superior alternatives? 1) The use of .prev/.nav is difficult to circumvent considering I have hundreds (literal hundreds) of textboxes. Writing a function for each seems overkill unless you're suggesting a different remedy. 2) Regarding the condition for checking for zero, I'm happy to break the code out into more lines as per your example except I cannot manage to make it work with .next and .prev. – Dominor Novus Apr 22 '13 at 06:08
  • @DominorNovus :: seems like I arrived late to answer your question :) – AdityaParab Apr 23 '13 at 10:56
  • @Maverick :: Not to worry, you provided me with the original basis for incrementing/decrementing the value of the textbox. – Dominor Novus Apr 24 '13 at 23:43