1

i have the following input tag:

<input id="item_amount" type="text" id="item_stk" placeholder="1" value="" class="input-small" placeholder="" style="float: left;">

now to make sure that this input fields value is less than a certain amount i made the following Jquery function:

var max_amount = $('#max_amount').val();

$( "#item_amount" ).keyup(function() {
       if($(this).val() > max_amount){
        $(this).val( max_amount);
    }
});

Now max value is set to 2

if i write 4 in the input field it correctly returns the value to 2.

However if start by writing 1 then 2 then 3 then 4 ect ect ect. then it never gets into the if statement and resets the value.

ie. the value of the input field is now 1234 (which is far more than 2).

So what am i doing wrong?

Marc Rasmussen
  • 19,771
  • 79
  • 203
  • 364

2 Answers2

3

Right now, you're comparing strings, and the comparison isn't numeric : "10" < "2"

You need to parse the values :

var max_amount = parseFloat($('#max_amount').val());
if (parseFloat($(this).val()) > max_amount){
Denys Séguret
  • 372,613
  • 87
  • 782
  • 758
  • Do i need to do this on both ends? – Marc Rasmussen Oct 12 '13 at 15:50
  • Not really but it's cleaner to work with numbers. Do you think you'll always be able to remember how it works ? What's the result of `"25"-4` ? And of `"25"+4` ? – Denys Séguret Oct 12 '13 at 15:54
  • If using only with integer values, consider `parseInt` instead. There are different ways of casting a string to a number, as outlined [here](http://stackoverflow.com/questions/1133770/how-do-i-convert-a-string-into-an-integer-in-javascript). For example, `var max_amount = +$('#max_amount').val()` *should* work, though I prefer the more verbose ways for clarity. – Zach Lysobey Oct 12 '13 at 15:54
  • 1
    @ZachL parseFloat always work, for float and integers (there's only one numeric type in JavaScript). – Denys Séguret Oct 12 '13 at 15:54
  • 1
    @ZachL If you want it to be more verbose, use `Number(someValue)`. The `parse` functions silently strip off trailing non-numeric characters, which I don't usually like to allow (especially with user input), while using `+` and `Number` result in `NaN` – Ian Oct 12 '13 at 15:57
1

Make sure your inputs are of type number:

<input type="number" step="any" id="max_amount" />

Then do a parseFloat($('#max_amount').val()) to convert the string into an actual decimal value.

Of course, this has to be done with all inputs you want to treat as numbers.

It is better to use type="number" so you don't have to worry about isNaN tests in your code on the call to parseFloat.

Hope that helps.

Vidya
  • 29,932
  • 7
  • 42
  • 70
  • 1
    http://caniuse.com/#feat=input-number. Unsupported browsers just interpret `type="number"` as `type="text"` so you may have to still consider testing for `isNaN` – Zach Lysobey Oct 12 '13 at 15:59
  • I've never used a browser where it didn't work, but that is certainly a good point to test on all supported browsers as determined by the application. If it doesn't, then some kind of numerical validation will be necessary like isNan, $.isNumeric, etc. – Vidya Oct 12 '13 at 16:02