Javascript increment result of input and include comma

Question

I can't seem to get this working and it's driving me insane. I've made a JSFiddle and am keen for anyone with more knowledge than me to take a look! http://jsfiddle.net/kLQf3/9/

Basically what I am trying to do is get the user to be able to put a figure (comma included) in the first "To" field ie. "60,000" and I want this number to display in the "From" field it incremented by 1 ie. "60,001".

And the same for the input box. I have limited knowledge of JS but I've got the auto update working but the increment keeps giving me NaN errors because the comma is included.

window.onload = function () {
  var first = document.getElementById('firstFieldId'),
      second = document.getElementById('secondFieldId'),
      third = document.getElementById('thirdFieldId'),
      fourth = document.getElementById('fourthFieldId');

  first.onchange = function () {
    second.value = first.value;
  third.onchange = function () {
    fourth.value = third.value;
};
};
};

You've tagged your question `jquery`, but aren't using jQuery in the code you've quoted. Are you using jQuery in your project? — T.J. Crowder, Feb 04 '14 at 07:06
Yes, jQuery in the project and the whole project is PHP but I guess that's not relevant to the question. Thanks — , Feb 04 '14 at 07:19
@ verruck: I'd take an hour to read through the jQuery API and do a tutorial or two. Most of your question doesn't relate to jQuery, but it applies to the code you quoted surrounding the question about commas and formatting. — T.J. Crowder, Feb 04 '14 at 07:25

score 1 · Answer 1 · answered Feb 04 '14 at 07:14

Just using parseint or pasefloat:

window.onload = function () {
var first = document.getElementById('firstFieldId'),
  second = document.getElementById('secondFieldId'),
  third = document.getElementById('thirdFieldId'),
  fourth = document.getElementById('fourthFieldId');

first.onchange = function () {
second.value =  parseFloat(first.value)+1;
alert(second.value);
third.onchange = function () {
fourth.value = parseFloat(third.value)+1;
};
};
};

score 0 · Accepted Answer · edited May 23 '17 at 11:49

Assuming you get the value you want into the variable value...

...to remove the comma:

value = value.replace(/,/g, "");

...to parse the number:

value = parseInt(value, 10); // 10 = base 10

Adding back a comma is trickier, but SO already has that covered: How to print a number with commas as thousands separators in JavaScript.

Example applied to your first.onchange handler: Updated Fiddle

first.onchange = function () {
    var value;

    // Get the value and remove the commas
    value = first.value.replace(/,/g, "");

    // Make it a number
    value = parseInt(value, 10);

    // Add one to it
    ++value;

    // Turn it back into a string
    value = String(value);

    // Put it in the other text box, formatted with commas
    second.value = numberWithCommas(value);
};

You can do that all at once, but it makes debugging more difficult:

first.onchange = function () {
    second.value = numberWithCommas(String(parseInt(first.value.replace(/,/g, ""), 10) + 1));
};

You have some other issues with that code, not least that you don't hook up your change handler on third until the first time first is changed. If you format your code consistently, that becomes more apparent:

window.onload = function () {
    var first = document.getElementById('firstFieldId'),
        second = document.getElementById('secondFieldId'),
        third = document.getElementById('thirdFieldId'),
        fourth = document.getElementById('fourthFieldId');

    first.onchange = function () {
        second.value = first.value;
        third.onchange = function () {
            fourth.value = third.value;
        };
    };
};

Thanks T.J. Crowder! Are you able to include it in the JSFiddle so I can see where `parseInt` goes? I've never used that before. :/ — , Feb 04 '14 at 06:57
@verrucktfuchs: To add one to the number, you need it to be a number, not a string. So use `parseInt` to turn the string you get from the input element into a number before you add 1 to it. — T.J. Crowder, Feb 04 '14 at 06:58
Ok still a tad lost but I'll give it a go. Still pretty new to this stuff! Thanks again. :) — , Feb 04 '14 at 07:03
@verrucktfuchs: I've given you an example for `first.onchange` and made another note above. — T.J. Crowder, Feb 04 '14 at 07:13

score 0 · Answer 3 · answered Feb 04 '14 at 07:16

window.onload = function () {
  var first = document.getElementById('firstFieldId'),
      second = document.getElementById('secondFieldId'),
      third = document.getElementById('thirdFieldId'),
      fourth = document.getElementById('fourthFieldId');

  first.onchange = function () {
    second.value = parseInt(first.value.replace(/,/g, "")) +1;
  third.onchange = function () {
    fourth.value = parseInt(third.value.replace(/,/g, "")) +1;
};
};
};

pretty much what T.J. Crowder said, but here is your fiddle link: http://jsfiddle.net/kLQf3/17/

Javascript increment result of input and include comma

3 Answers3