Allow decimal with isNaN

Question

I have a script where i can put in a number in one text box and it will calculate the equivalent in the other textboxes.

$("input[type=text]").keyup(function () {

        var number = parseFloat($(this).val());
        var inc = parseFloat($(this).attr("inc"));
        var newValue = number / inc;
        $("input[type=text]").each(function () {
              if(isNaN(newValue * parseFloat($(this).attr("inc"))))
                   $(this).val(0);
              else
                   $(this).val(newValue * parseFloat($(this).attr("inc")));
         });
});

Can check : JSFiddle Here

At the moment it doesn't allow for decimal numbers. But i really need it to. And i don't know how to allow a decimal.

Also i need the box's to have a limit of 2 numbers ofter the decimal point.

Using `keyup` event is causing problems. Your code executes as soon as you press dot. Better use `change` event. Demo: http://jsfiddle.net/abhitalks/RX2sL/19/ — Abhitalks, Jun 03 '14 at 07:32
It definitely works good but i need to to be able to update as i type. Because with it like that i need to click out of the text box — Armageddon80, Jun 03 '14 at 07:35
It's not a duplicate of that other question; @Armageddon80's problem is happening for a different reason. — IQAndreas, Jun 03 '14 at 07:37
It's not a duplicate... however, you have to allow "," without parse it. Here's code: var keyCode = (event.charCode + "" != "undefined") ? event.charCode : event.keyCode; // controllo valori numerici if (keyCode == 46 || keyCode == 44) { // , or . return; } — MrPk, Jun 03 '14 at 07:37
Instead of using .keyup or .change how do i go about using a button to execute it? — Armageddon80, Jun 03 '14 at 07:38
@Armageddon80 Keyup is not causing the problem. Try this: http://jsfiddle.net/RX2sL/27/ (I want to add it as an answer, but can't since the question is locked for an invalid reason) — IQAndreas, Jun 03 '14 at 07:40
@IQAndreas: Yes, you're right. Excluding the current input from calculations will fix that keyup problem. And that is what it is in this context. Voting to reopen as it is not duplicate. — Abhitalks, Jun 03 '14 at 07:47
@Armageddon80 I added a few lines of code that go beyond the question you asked. Let me know if you wish me to explain them: http://jsfiddle.net/RX2sL/41/ — IQAndreas, Jun 03 '14 at 07:55
@IQAndreas Question is open again, and your solution works brilliantly, post it as an answer. — scragar, Jul 10 '14 at 17:24

IQAndreas · Accepted Answer · 2014-07-10T22:21:09.680

TL;DR: Skip to the actual code if you just want the fix. The following paragraphs explains why it is happening.

The reason the decimal numbers aren't working is every single time the text box get edited by a single character, all numbers in all text boxes are converted to a float. If you type 1 into one of the boxes, the value gets passed to parseFloat and gets converted to 1 (the same value). If you then press the 3 character, the text box says 13, which gets passed to parseFloat and returns the same value, 13.

However, if you start typing 13., that gets passed to parseFloat; JavaScript realizes the period is unnecessary*, and places the value 13 in the text box. No matter how fast you type, JavaScript will keep wanting to trim off that "unnecessary" period before you can add extra digits to the end.

You can solve this by only running parseFloat function (or changing the value in any way) on the text fields you are not currently typing in. I have emphasized the two lines in which "the magic happens":

$("input[type=text]").keyup(function () {
    var number = parseFloat($(this).val());
    var inc = parseFloat($(this).attr("inc"));
    var newValue = number / inc;
    var current = this;   // <---- "current" is the text field that is currently being edited
    $("input[type=text]").each(function () {
        if(this != current) {    // <--------------
            if (isNaN(newValue * parseFloat($(this).attr("inc"))))
                $(this).val(0);
            else
                $(this).val(newValue * parseFloat($(this).attr("inc")));
        }
    });
});

And a JS Fiddle of the code so you can test it: http://jsfiddle.net/RX2sL/27/

* Technically the period gets trimmed off due to the String -> Float -> String conversion, but it's easier to think of the period as being "unnecessary".

I also created a "more advanced" version which indicates if the entered value is not a proper number: http://jsfiddle.net/IQAndreas/RX2sL/42/ — IQAndreas, Jul 10 '14 at 22:20

Allow decimal with isNaN

1 Answers1