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.

Answer 1

You can use parseInt(...)

Example:

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

Answer 2

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.

Answer 3

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

Answer 4

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>

Answer 5

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.