numerical value of number input by user in a text field

Question

I need to add up two numbers input by the user. To do that, I create two input fields, retrieve values from them , using .val(), in two separate variables and then add them. The problem is that the strings are added and not the numbers. For eg. 2 + 3 becomes 23 and not 5. please suggest what to do, except using type = number in the input boxes.

possible duplicate of [Javascript to convert string to number?](http://stackoverflow.com/questions/2130454/javascript-to-convert-string-to-number) — Felix Kling, Feb 14 '12 at 16:11

John Fisher · Accepted Answer · 2016-01-11T07:50:00.100

6

You can use parseInt(...)

Example:

var num = parseInt("2", 10) + parseInt("3", 10);
// num == 5

edited Jan 11 '16 at 07:50

answered Feb 14 '12 at 16:03

John Fisher

22,355
2
39
64

What if the user enters `2.5`? Even if you assume that only integers are allowed, please don't suggest `parseInt()` without using the second parameter to specify base 10 with `parseInt("2",10)`, because otherwise if the user enters a leading zero (e.g., "077") it may (depending on the browser) be treated as octal; if the user enters a leading "0x" it'll be treated as hexadecimal. – nnnnnn Jun 02 '13 at 02:04

Zeta · Answer 2 · 2013-06-08T06:17:09.780

4

Use parseInt to convert a string into a number:

var a = '2';
var b = '3';
var sum = parseInt(a,10) + parseInt(b,10);
console.log(sum); /* 5 */

Keep in mind that parseInt(str, rad) will only work if str actually contains a number of base rad, so if you want to allow other bases you'll need to check them manually. Also note that you'll need to use parseFloat if you want more than integers.

edited Jun 08 '13 at 06:17

answered Feb 14 '12 at 16:02

Zeta

103,620
13
194
236

What if `a` is `'2.5'`? What if a is `'0x77'` or `'077'` and you haven't specified the radix? – nnnnnn Jun 02 '13 at 02:05
@nnnnnn: Fixed it, that was one of my earliest answers and I wasn't aware of the `parseInt` issues at that time. – Zeta Jun 08 '13 at 06:20

score 0 · Answer 3 · answered May 02 '13 at 18:17

0

Number() is the function you want "123a" returns NAN

parseInt() truncates trailing letters "123a" returns 123

<input type="text" id="txtFld" onblur="if(!Number(this.value)){alert('not a number');}" />

jsfiddle

answered May 02 '13 at 18:17

hinekyle

822
8
16

score 0 · Answer 4 · answered Jul 06 '22 at 07:37

It's a bit easier today. If you have an input[type=number] you can simply do input.valueAsNumber.

This will not work for every input-type though. It will work for input[type=date] but then you could do input.valueAsDate.

Array.from(document.querySelectorAll('input')).forEach(input=>{
  input.addEventListener('input', e=>showInputValue(e.currentTarget))
  showInputValue(input)
})

function showInputValue(input) {
  input.nextSibling.textContent = ` // input.valueAsNumber -> ${input.valueAsNumber}`
}

body {
  font-family: monospace;
}
label {
  width: 100%;
  display: flex;
}
span:first-child, input {
  width: 6rem;
  flex: 0 0 6rem;
}
span:last-child {
  flex: 1 0 16rem;
  padding-left: 1rem;
}

<label><span>text: </span><input type="text" value="123"><span></span></label>
<label><span>number: </span><input type="number" value="123"><span></span></label>
<label><span>range: </span><input type="range" value="123"><span></span></label>
<label><span>date: </span><input type="date" value="2022-07-06"><span></span></label>

score 0 · Answer 5 · answered Feb 14 '12 at 16:04

Either use parseInt (http://www.w3schools.com/jsref/jsref_parseint.asp) or parseFloat (http://www.w3schools.com/jsref/jsref_parsefloat.asp) to convert to a numerical value before adding.

PS: This is the simple answer. You might want to do some validation/stripping/trimming etc.

numerical value of number input by user in a text field

5 Answers5

Linked

Related