CODEWITHSUNDEEP
jqueryhtmlbuttonfiddle
sizemattic
sizemattic

Reputation: 149

Plus/Minus Max Value Input

I have a plus/minus button and would like it so that users cannot select over 20 but do not know how to get it working. I tried using the min="1" max="5 attributes but they did not work. Here is my code and a link to a fiddle. https://jsfiddle.net/6n9298gp/ 

<form id='myform' method='POST' action='#' class="numbo">
<input type='button' value='-' class='qtyminus' field='quantity' style="font-weight: bold;" />
<input type='text' name='quantity' value='1' class='qty' style="margin-bottom: 0px !important" onkeypress='return event.charCode >= 48 && event.charCode <= 57'/>
<input type='button' value='+' class='qtyplus' field='quantity' style="font-weight: bold;" />
</form>

<script type="text/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);
            $('.qtyminus').val("-").removeAttr('style')
        } else {
            // Otherwise put a 0 there
            $('input[name='+fieldName+']').val(1);

        }
    });
// 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 > 1) {
        // Decrement one
        $('input[name='+fieldName+']').val(currentVal - 1);
    } else {
        // Otherwise put a 0 there
        $('input[name='+fieldName+']').val(1);
        $('.qtyminus').val("-").css('color','#aaa');
        $('.qtyminus').val("-").css('cursor','not-allowed');
    }
});
});
</script>

Upvotes: 1

Views: 14871

Answers (4)

aardrian
aardrian

Reputation: 9009

<input type="number" min="1" max="20" step="1">

Then you can use script to deliver validation messages (only because messages built into browsers for the number field are currently poor).

This removes dependencies on libraries, follows the HTML specification, and has accessibility built in for free.

If you still need +/− buttons to satisfy a design restriction, make sure you use a minus character (&#8722;) and then progressively enhance with your script on top of the correct field type. This way any scenario where your jQuery does not download (such as a network hiccup) or there is a script error on the page won't bring the entire thing crashing down.

If you aren't satisfying a design requirement with +/− buttons, consider losing them altogether.

You could also progressively enhance this for browsers who might struggle with type="number" (though you can see support is pretty good while pattern support is even better) without script by putting a pattern match into the element, though this is a pretty edge case:

<input type="number" min="1" max="20" step="1" pattern="[0-9]*">

You can read more on type="number" in the HTML5 spec or the language reference.

Upvotes: 5

riteshmeher
riteshmeher

Reputation: 874

Try adding a condition to check the value less than the max 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
                    if(currentVal<20)
                    {
                    $('input[name='+fieldName+']').val(currentVal + 1);
                    $('.qtyminus').val("-").removeAttr('style');
                    }
                } else {
                    // Otherwise put a 0 there
                    $('input[name='+fieldName+']').val(1);

                }
            });

Upvotes: 0

Parvez Rahaman
Parvez Rahaman

Reputation: 4397

You were doing correct.

$('.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) && currentVal < 20) {
                // Increment
                $('input[name='+fieldName+']').val(currentVal + 1);
            } else {
                // Otherwise put a 0 there
                //$('input[name='+fieldName+']').val(1);
                $(this).val("+").css('color','#aaa');
            $(this).val("+").css('cursor','not-allowed');

            }
        });


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) && currentVal < 20) {
                // Increment
                $('input[name='+fieldName+']').val(currentVal + 1);
            } else {
                // Otherwise put a 0 there
                //$('input[name='+fieldName+']').val(1);
                $(this).val("+").css('color','#aaa');
            $(this).val("+").css('cursor','not-allowed');

            }
        });
    // 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 > 1) {
            // Decrement one
            $('input[name='+fieldName+']').val(currentVal - 1);
        } else {
            // Otherwise put a 0 there
            $('input[name='+fieldName+']').val(1);
            $(this).val("-").css('color','#aaa');
            $(this).val("-").css('cursor','not-allowed');
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id='myform' method='POST' action='#' class="numbo">
    <input type='button' value='-' class='qtyminus' field='quantity' style="font-weight: bold;" />
    <input type='text' name='quantity' value='1' class='qty' style="margin-bottom: 0px !important" onkeypress='return event.charCode >= 48 && event.charCode <= 57'/>
    <input type='button' value='+' class='qtyplus' field='quantity' style="font-weight: bold;" />
    </form>

Upvotes: 0

zoubida13
zoubida13

Reputation: 1759

I have updated the jsfiddle here : https://jsfiddle.net/6n9298gp/5/

Basically just added a block that will check that the current value is lower than 20 to allow increment otherwise show your "not allowed" icon :

if (currentVal < 20)
{
      $('input[name='+fieldName+']').val(currentVal + 1);
      $('.qtyminus').val("-").removeAttr('style');
}
else
{
      $('.qtyplus').val("+").css('color','#aaa');
      $('.qtyplus').val("+").css('cursor','not-allowed');
}

Also added a line to remove the cursor not allowed once you decrement :

// Decrement one only if value is > 1
$('input[name='+fieldName+']').val(currentVal - 1);
$('.qtyplus').val("+").removeAttr('style');

Upvotes: 2

Related Questions