Javascript testing for NaN

Question

The below block of code asks the server for an adjusted account balance after the user inputs a number to quantity, price and payment fields. Adding --10 to a field would throw an error on the server. That's why I've added the NaN check adjustment === adjustment. This way it should only send the request if the adjustment amount is a number. For some reason though, I'm still getting strange things being sent to the server like --10...

Essentially, I need to only send the request when it is actually a number.

var quantity = $("#id_quantity").val();
    var price = $("#id_price").val();
    var payment = $("#id_payment_amount").val();
    var adjustment = quantity * price - payment;
    // Don't send if Not a number (NaN).
    if (adjustment === adjustment) {
        $.get("/balance_after_adjustment", {amount: adjustment}, function(response) {
            $("span").text(response);
        });
    }

`isNaN()`: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN , and `Number.isNaN()`: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/isNaN — Ian, Oct 08 '13 at 19:51
You're getting the values as strings, then running a mathematical calculation on them. I'd suggest parsing each item individually using `parseFloat` or `parseInt`, that way you get good numbers first before trying to do any calculations on them. — Joe Enos, Oct 08 '13 at 19:53
Still, do not forget to test `amount` at server side. Otherwise some "hacker" may overcome Javascript check. — Alex, Oct 08 '13 at 19:53
@JoeEnos I don't see how that would change anything. The operators will implicitly convert to numbers anyways. And I wouldn't use the `parse` functions on user input; the unary `+` operator or `Number()` function make more sense — Ian, Oct 08 '13 at 19:57
@Ian It may not be the whole solution, but it would allow you to test one at a time each of the inputs, and report a failed parse on the specific field that was typed incorrectly. I didn't know about the unary `+` operator, looks like that would work well. Seems there are [a few differences](http://stackoverflow.com/questions/17106681/parseint-vs-unary-plus-when-to-use-which), but for a good number it appears like that might be the better solution. — Joe Enos, Oct 08 '13 at 21:25
@JoeEnos I definitely agree with this last comment of yours - you didn't mention testing each one and reporting back any failures, which I wasn't sure if it was something the OP wanted...nonetheless, a good suggestion. My other point was that the `parse` functions ignore any trailing non-digit characters, while the unary `+` operator and `Number()` (which do the same thing) do not. When dealing with user input, ignoring trailing characters may or may not be desired, but I wanted to point that out. I can't think of many/any scenarios where the `parse` functions should be used over `+` — Ian, Oct 08 '13 at 21:27

score 1 · Accepted Answer · answered Oct 08 '13 at 19:54

1

I would probably try something like this

var quantity = parseInt($("#id_quantity").val(),10),
 price = parseInt($("#id_price").val(),10),
 payment = parseInt($("#id_payment_amount").val(),10),
 adjustment = quantity * price - payment;
if (!isNaN(adjustment)) {
    $.get("/balance_after_adjustment", {amount: adjustment}, function(response) {
        $("span").text(response);
    });
}

answered Oct 08 '13 at 19:54

Nils Larson

488
4
14

1

There is no isNaN() method like that. – epascarello Oct 08 '13 at 19:56
Sorry typo fixed now though – Nils Larson Oct 08 '13 at 19:58

score -1 · Answer 2 · answered Oct 08 '13 at 20:02

-1

put a + before the statement so the string returned by the method val will be casted as integer

var quantity = +$("#id_quantity").val(),
    price = +$("#id_price").val(),
    payment = +$("#id_payment_amount").val();

answered Oct 08 '13 at 20:02

Andrés Torres

747
5
16

Javascript testing for NaN

2 Answers2