CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user2531590
user2531590

Reputation:

JavaScript Increment and Decrement Buttons

Basically I am trying to do a increment and decrement buttons. When the text value hit 24, it should stop increase. Here is the HTML codes:

<input type='button' value='-' class='qtyminus' field='quantity' />
<input type='text' name='quantity' value='0' class='qty' />
<input type='button' value='+' class='qtyplus' field='quantity' />

My CSS:

.qty {
    width: 40px;
    height: 25px;
    text-align: center;
}
input.qtyplus {
    width:25px;
    height:25px;
}
input.qtyminus {
    width:25px;
    height:25px;
}

And my JavaScript:

jQuery(document).ready(function(){
    // This button will increment the value
    $('.qtyplus').click(function(e){
        // Stop acting like a button
        e.preventDefault();
        // Get the field name
        fieldName = $(this).attr('field');
        // Get its current value
        var currentVal = parseInt($('input[name='+fieldName+']').val());
        // If is not undefined
        if (!isNaN(currentVal)) {
            // Increment
            $('input[name='+fieldName+']').val(currentVal + 1);
        } else {
            // Otherwise put a 0 there
            $('input[name='+fieldName+']').val(0);
        }
    });
    // This button will decrement the value till 0
    $(".qtyminus").click(function(e) {
        // Stop acting like a button
        e.preventDefault();
        // Get the field name
        fieldName = $(this).attr('field');
        // Get its current value
        var currentVal = parseInt($('input[name='+fieldName+']').val());
        // If it isn't undefined or its greater than 0
        if (!isNaN(currentVal) && currentVal > 0) {
            // Decrement one
            $('input[name='+fieldName+']').val(currentVal - 1);
        } else {
            // Otherwise put a 0 there
            $('input[name='+fieldName+']').val(0);
        }
    });
});

Here is my fiddle. I get this fiddle by researching. I wonder is there any way to style the entire thing like plus button on top, followed by textbox and then minus button.

Also, is there any way to set the plus and minus limit by JavaScript? Because I did set a if ekse statement but it does not work.

Upvotes: 0

Views: 3048

Answers (3)

Yaje
Yaje

Reputation: 2831

put this code inside your if (!isNaN(currentVal) && currentVal > 0)

if(currentVal === 24){ return; }

EDIT : this way if the current value of you input box is 24 it will exit the function.

Upvotes: 1

Datz Me
Datz Me

Reputation: 955

I just edited your jsFiddle..

http://jsfiddle.net/puJ6G/847/

It is in your statement.. but i just wonder if you want to stop the last number to 24 or if the number reach 24 it will turn 0.

In code here it will just stop in 24

if (currentVal == 24) {
            $('input[name='+fieldName+']').val(currentVal);
        }
        else if (!isNaN(currentVal) ) {
            // Increment
            $('input[name='+fieldName+']').val(currentVal + 1);
        } 
        else {
            // Otherwise put a 0 there
            $('input[name='+fieldName+']').val(0);
        }

But is you want to turn the 24 back to 0 use this.

if (!isNaN(currentVal) && && currentVal<24 ) {
      // Increment
$('input[name='+fieldName+']').val(currentVal + 1);
} 
else {
// Otherwise put a 0 there
$('input[name='+fieldName+']').val(0);
}

I hope it will help you..

Upvotes: 0

Bemmu
Bemmu

Reputation: 18217

In the code you originally pasted the "else if" part was not reached, because the "if (!isNaN..." part was already true. As VoronoiPotato suggested in the comments, you need to move the comparison elsewhere. For example:

    if (!isNaN(currentVal) ) {
        if (currentVal < 24) {
            // Increment
            $('input[name='+fieldName+']').val(currentVal + 1);
        }
    } else {
        // Otherwise put a 0 there
        $('input[name='+fieldName+']').val(0);
    }

Upvotes: 0

Related Questions