0

I am trying to make a loan calculator that only allows a maximum of two decimals to be typed at once. Unfortunately, to do this I have had to add a script for the input which disallows commas to be inputted. I am not sure why this does not allow commas. I would like commas for the purpose of separating every third number. For example, 1,000,000.

A working example of my page can be seen at: http://thetotempole.ca/sales/loancalculator.php

I am not looking for suggestions, but full solutions to my problem, please.

Here is the script I am using currently:

<script>
function trimDP(x, dp) {
    x = parseFloat(x);
    if (dp === 0)
        return Math.floor(x).toString();
    dp = Math.pow(10, dp || 2);
    return (Math.floor((x) * dp) / dp).toString();
}

window.addEventListener('load', function () {
    var nodes = document.querySelectorAll('.dp2'), i;
    function press(e) {
        var s = String.fromCharCode(e.keyCode);
        if (s === '.')
            if (this.value.indexOf('.') === -1)
                return; // permit typing `.`
        this.value = trimDP(this.value + s);
        e.preventDefault();
    };
    function change() {
        this.value = trimDP(this.value);
    }
    for (i = 0; i < nodes.length; ++i) {
        nodes[i].addEventListener('keypress', press);
        nodes[i].addEventListener('change', change);
    }
});
</script>

and here is my input code:

<input type=text name=loan size=10 class="dp2">
Kelsey
  • 913
  • 3
  • 19
  • 41
  • When `trimDP` is called on your input, `parseFloat` removes the commas. – kei Apr 10 '14 at 20:59
  • What should I do to my code? – Kelsey Apr 10 '14 at 21:03
  • Quite a bit, I'm afraid. You need to rewrite the code that parses the input so that it allows the comma character... And then how will you deal with misplaced commas? – Scott Sauyet Apr 10 '14 at 21:05
  • Well, I offer one up vote, best answer, and my thanks if you can do exactly that. I have a plan for that, don't worry. – Kelsey Apr 10 '14 at 21:06
  • Just to warn you, this question may get closed if you push the "do my homework for me" angle. Stack Overflow is here to help along the way, not write your code for you. – beeglebug Apr 10 '14 at 21:09
  • I am just looking for a solution to my problem, is that not allowed in StackOverflow? I am only looking for help, @beeglebug. – Kelsey Apr 10 '14 at 21:10
  • Problem is that people are here as free contractors.. I actually have the solution, but I think it's more worthwhile that you solve it yourself. Look up the terms 'regex', 'javascript', 'commas' and 'currency' on Google and it'll point you to the solution. Good luck. – Pete Apr 10 '14 at 21:12
  • The original question of why the commas are not appearing has been answered. What you are asking for now is the code to be written for you, which is different. – beeglebug Apr 10 '14 at 21:13
  • I am asking for a solution to my problem. I am not asking for code to be written for me. – Kelsey Apr 10 '14 at 21:15
  • Also if you want to support Firefox as well, instead of doing `e.keycode` you should consider `var s = String.fromCharCode(e.keycode || e.charCode);` – Linek Apr 10 '14 at 21:15
  • @Kelsey: In response to "What should I do to my code?" I said, "Quite a bit..." and described the changes you'll need to make. Your response was "Well, I offer one up vote, best answer, and my thanks if you can do exactly that...." It sounds precisely as though you're asking for code to be written for you. If you post your attempts and ask for help with what goes wrong, you'll get a much better response than if you ask us to do it for you. – Scott Sauyet Apr 11 '14 at 12:54
  • I am posting my attempts, and I am asking for help with what is wrong. I am implying for the help to change my code; not once have I asked for the code to be written for me. Also, I do not think there is terms and conditions on StackOverflow stating that code cannot be written to answer a user's question. – Kelsey Apr 11 '14 at 15:26

3 Answers3

1

You have a couple of errors in there.

As I have written as a comment. e.keyCode wont work on Firefox, at least it does not work on mine. Instead, you should do

var s = String.fromCharCode(e.keycode || e.charCode);

By doing e.preventDefault(); in keypress listener, you are disabling any key presses, which includes arrow keys, backspace, delete, etc.

I wont even mention for a hundred time parseFloat.

More on Determining which key is pressed.

Linek
  • 1,353
  • 10
  • 20
  • Yes, it does work on FireFox, now. Thank you for that. If I take out `e.preventDefault();` it makes everything you type be inputted twice. For example, if I typed 2 it would be 22. – Kelsey Apr 10 '14 at 21:30
  • Best answer, because you gave me the information to help solve my problem and then some. – Kelsey Apr 11 '14 at 15:39
0

It's because you are using parseFloat on the number, and then setting the value of the field back to that value. Once the string is converted to a number, the commas will be removed, as the only valid non numeric character in a number is the period representing the decimal place.

If you want people to be able to enter commas, you would have to stop using the mathematical functions, and instead deal with the data as a string and use a regex to trim off the extra decimal places.

See this other question for an example of the kind of function you need:

How to print a number with commas as thousands separators in JavaScript

Community
  • 1
  • 1
beeglebug
  • 3,522
  • 1
  • 23
  • 39
0

Your tripDP function is calling parseFloat, removing all non-numeric characters except the decimal point. That's why you can't type "a" or "@" in there either...

That function will need a serious rewrite if you want to support the comma character.

Scott Sauyet
  • 49,207
  • 4
  • 49
  • 103