Jquery keyup triggered after both numbers

Question

$(".maxQtyclass").keyup(function () { 
    var maxQty = $(this).attr('data-qty');
    //lets say it is 8
    if ($(this).val() > maxQty
        && e.keyCode != 46 // delete
        && e.keyCode != 8 // backspace
    ) { 
        $(this).val(maxQty);
        alert('Only ' + maxQty + ' unit(s) available!');
        return false; 
    } 
});

When I press 8 (no message since 8 is not > than 8.) When I press 9 it triggers alert that only 8 units available. So far so good but when I press 12 it does not trigger alert, why? 12 is > than 8. Looks like keyup reads only first number entered. How to do force keyup to read number 12?

you can use change event to get the whole string and check it... — Shival, Nov 06 '17 at 04:20
Never use keyup to compare values. It always considers the previous value. Instead use blur or change event. — RAP, Nov 06 '17 at 05:08
This shows how to use onchange: https://stackoverflow.com/questions/11179406/jquery-get-value-of-select-onchange — kmoser, Nov 06 '17 at 21:27

score 0 · Answer 1 · answered Nov 06 '17 at 04:21

You need to pass the event object in the function to get keycode

$(".maxQtyclass").keyup(function (e) { 
        var maxQty = $(this).attr('data-qty');
        //lets say it is 8\
        if (parseInt($(this).val()) > parseInt(maxQty)
            && e.keyCode != 46 // delete
            && e.keyCode != 8 // backspace
            ) { 
                $(this).val(maxQty);
                console.log('Only ' + maxQty + ' unit(s) available!');
                return false; 
            } 
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="maxQtyclass" data-qty="8"/>

yep. That is what I asked for. You guys THE best! – W. Kowalik Nov 06 '17 at 04:31 — W. Kowalik, Nov 06 '17 at 04:31

score 0 · Answer 2 · answered Nov 06 '17 at 04:22

Since, it is doing the string comparison so "12" > "8" is failing. Try converting to int and compare as below.

$(".maxQtyclass").keyup(function () { 
        var maxQty = $(this).attr('data-qty');
        //lets say it is 8
        if (parseInt($(this).val()) > parseInt(maxQty)
            && e.keyCode != 46 // delete
            && e.keyCode != 8 // backspace
            ) { 
            $(this).val(maxQty);
            alert('Only ' + maxQty + ' unit(s) available!');
            return false; 
        } 
    });

Works. I should have asked it earlier. Would save me 3 hours in research. — W. Kowalik, Nov 06 '17 at 04:29

score 0 · Answer 3 · edited Nov 06 '17 at 04:54

You should parse your input text to number. In your scenario you compare "12" > "8" in string data type, and because 12 start with 1 and 1 in string is less than 8 the condition returns false. Change the code like this:

$(".maxQtyclass").keyup(function () { 
    var maxQty = parseInt($(this).attr('data-qty'));
    //lets say it is 8
    if (parseInt($(this).val()) > maxQty
        && e.keyCode != 46 // delete
        && e.keyCode != 8 // backspace
    ) { 
        $(this).val(maxQty);
        alert('Only ' + maxQty + ' unit(s) available!');
        return false; 
    } 
});

Be sure all numbers are int.

Jquery keyup triggered after both numbers

3 Answers3