CODEWITHSUNDEEP
javascripthtml
Akash
Akash

Reputation: 531

numerical value of number input by user in a text field

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.

Upvotes: 7

Views: 12511

Answers (5)

Sjeiti
Sjeiti

Reputation: 2648

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>

Upvotes: 0

John Fisher
John Fisher

Reputation: 22719

You can use parseInt(...)

Example:

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

Upvotes: 6

Zeta
Zeta

Reputation: 105886

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.

Upvotes: 4

hinekyle
hinekyle

Reputation: 912

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');}" />

Upvotes: 0

ndtreviv
ndtreviv

Reputation: 3624

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.

Upvotes: 0

Related Questions