Comma In Input value="" Preventing Calculation

JavaScript
1

Hi,

I have two numerical input fields where each value is used in a calculation and displayed in an output.The user will input their own numbers, but each input has a starting value on load. Because the value for input field 1 is large, I wanted commas. I have the script for adding commas and script for the calculation. The problem is I want the large value field’s number on load to have a comma. It wouldn’t on load so I added a comma to the input value=“200,000” The comma is there on load, but then the calculation wont work. If I take out the comma from the value=“200000” the calculation works, but the on load 200000 doesn’t have a comma. Any help to have a comma on the load value and have the calculation still work would be appreciated. Thank you.

HTML

<input id="quantity" class="inputvar1" name="quantity" type="text" data-type="number" value="200,000" />

JS - Calculation

$(‘#quantity,#apply_time’).keyup(function() {
var units = $(“#quantity”).val();
var seconds = $(“#apply_time”).val();
var convert = 60;

var total = Math.round (units * seconds / convert / convert);

$(“#hours”).val(total); // sets the total hours input to the quantity * seconds
});

JS - Add Commas

$(“input[data-type=‘number’]”).keyup(function(event){
// skip for arrow keys
if(event.which >= 37 && event.which <= 40){
event.preventDefault();
}
var $this = $(this);
var num = $this.val().replace(/,/gi, “”);
var num2 = num.split(/(?=(?:\d{3})+$)/).join(“,”);
console.log(num2);
$this.val(num2);
});

2

Yep, all you want to do is replace the commas when you need to deal with it as a number for calculations.

var units = parseInt($("#quantity").val().replace(',', ''));

You should probably handle the cases where people input a value that’s not a number too.

if (IsNaN(units) {  ... }
1 Like
4

The var units worked perfectly. Good point on the NaN, thank you!

5

If the numbers don’t have to be integers then you can substitute Number or + for parseInt so as to allow decimal places

6

They do have to be integers but that is a good point thank you!

7

My else statement isn’t working, it breaks the commas. Also, if the user puts the curser behind the “2” in 200,000 and hits backspace to delete because lets say they want to make the “2” a “4”, the cursor goes to the end of the number; i.e 2|00,000> backspace > 00,000|

$("input[data-type='number']").keyup(function(event){
// skip for arrow keys
if(event.which >= 37 && event.which <= 40){
event.preventDefault();
}
else if(isNaN(units)){ return "ERR";}
  else{return false;
}
var $this = $(this);
var num = $this.val().replace(/,/gi, "");
var num2 = num.split(/(?=(?:\d{3})+$)/).join(",");
console.log(num2);
$this.val(num2);
});


Also, once the number of input digits gets to 8, the calculation is off:

$('#quantity,#apply_time').keyup(function() {
var units = $("#quantity").val();
var seconds = $("#apply_time").val();
var convert = 60;

var total = Math.round (units * seconds / convert / convert);

$("#hours").val(total); // sets the total hours input to the quantity * seconds
});
8

I’m not familiar with commas in time notation. Can you provide a few examples of possible valid values please.

9

The comma is in the quantity value not the time. Total time spent on a task that takes 3 seconds to complete per unit.

(quantity * 3 seconds)/60seconds/60 minutes= hours spent.

(200,000 * 3)/60/60=167 (rounded)

10

Just thought I would give this a refresh :slight_smile:

11

I have not come across a programming language that will perform arithmetic on a number with commas in it. You need one variable without the commas to do arithmetic on and another with commas in to output.

12

Neither have I

I have always stored numbers “clean” (eg. integers or floats) so that it is easier to do math with them, and then added commas, dollar signs etc. to the displayed values

That’s part of the reason I’m having some trouble conceptualizing this problem. It’s the reverse of what I have always done.

13

But if I take out the add commas JS and have my starting value=“200,000”, the calculation still works. It works onload and if let’s say the user replaces the 2 with a 4 to make 400,000.

14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.