How can val() return Number?

Question

In the valdocs written this description:

.val() Returns: String, Number, Array

I tried to get a Number, but it seems to return string only, Is there something that I'm doing wrong?

$('#gdoron').val('1');

alert($('#gdoron').val() === '1'); // true 
alert(typeof $('#gdoron').val());  // string.

$('#gdoron').val(1);

alert($('#gdoron').val() === 1);  // false
alert(typeof $('#gdoron').val()); // string (not "number"!)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="gdoron" />

My question is: how can val() return number as the docs says? The question is not about how can I parse the string.

A new, similar, question has been asked, but this question doesn't have the answer: use `valHooks`. That answer should probably be here, but this is a very old question, so answered it there... https://stackoverflow.com/a/70143214/2181514 — freedomn-m, Nov 28 '21 at 12:07

score 71 · Answer 1 · answered Feb 10 '12 at 11:47

71

A text input's value attribute will always return a string. You need to parseInt the value to get an integer:

parseInt($('#myInput').val(), 10);

answered Feb 10 '12 at 11:47

osahyoun

5,173
2
17
15

32

I know that, I'm asking how can `val` return number as the docs says, not how can I parse the string. – gdoron Feb 10 '12 at 11:48
1

Using the unary operators `-`, `+` and `~` before the `$` will also return a ***number***. `+$('#gdoron').val();` – Gibin Ealias Dec 16 '19 at 15:10
Can someone explain what the parameter 10 does in this function ? – Antoine Pelletier Oct 12 '22 at 14:09
1

@AntoinePelletier it's a radix (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt#syntax) – cl0ne Jul 20 '23 at 14:05

score 32 · Accepted Answer · edited Dec 16 '19 at 11:56

32

Some HTML5 elements e.g. progress;

console.log(typeof $("#prog").val()); // number

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<progress value="50" max="100" id="prog"></progress>

edited Dec 16 '19 at 11:56

Quentin

914,110
126
1,211
1,335

answered Feb 10 '12 at 11:55

Alex K.

171,639
30
264
288

Also see the [HTML5 draft](http://www.whatwg.org/specs/web-apps/current-work/#the-progress-element) (the return value is `double`). – Felix Kling Feb 10 '12 at 11:58
2

@gdoron: It says: *[...] form elements **such as** `input`, `select` and `textarea` [...]*. Now, I'm not a native English speaker, but it sounds to me that this is not meant to be an exhaustive list. – Felix Kling Feb 10 '12 at 12:01
Something weird: `alert($("#prog").val() === 50);//false` and `alert($("#prog").val() === '50'); //false`. **HOW?** – gdoron Feb 10 '12 at 12:03

score 16 · Answer 3 · answered Feb 10 '12 at 11:58

16

I've done a bit of quick peeking around, and I think I have an answer. If you look at the implementation of the val function you can see that if a so-called val-hook is in place, if the val-hook returns a number, that number will be returned as-is from the val function. I found this discussion which suggests that val-hooks are primarily used by plugins to create custom controls, such as sliders, etc., where the "natural" return value of val could be an integer. Hope this sheds a bit of light on your question.

answered Feb 10 '12 at 11:58

Klaus Byskov Pedersen

117,245
29
183
222

It looks like it returns a number by default. `$("").get(0).value === 50`. – pimvdb Feb 10 '12 at 12:09
2

The first link is broken. – Glenn Jan 15 '15 at 20:59
Too many pending edits, so I have to post an updated first link as a comment: https://github.com/jquery/jquery/blob/8be4c0e4f89d6c8f780e5937a0534921d8c7815e/src/attributes/val.js#L9 – cl0ne Jul 20 '23 at 14:04

score 4 · Answer 4 · answered Jul 04 '19 at 01:14

Hmm. For all these in the console, jQuery $($0).val() and Javascript's $0.value return the string "3":

<input type='number' value='3'/>
<input type='text' value='3'/>
<input type='radio' value='3'/>
<input type='checkbox' value='3'/>

So I think the jQuery val() documentation could be clearer. I can't see how it would ever return a number value so I'd suggest using parseInt($($0).val()) or parseFloat($($0).val()).

score 3 · Answer 5 · answered Jan 31 '18 at 15:07

3

You could simply create a jquery plugin to use instead of val() that would do this. Here I create the function nval() to use instead of val() when fetching a elements value.

$.fn.nval = function() {
   return Number(this.val())
};

Then in your code just use the following to get the value as a number

$('#elementID').nval()

answered Jan 31 '18 at 15:07

carcus88

137
1
7

2

While correct, it doesn't answer the (very old) question. – gdoron Feb 01 '18 at 08:57
Sure thats true but its provides a way to do it thats safe. If you really want to do it just use a plugin that overrides val() like $.fn._val = jq.fn.val; $.fn.val = function(value) { if ( !arguments.length ) { var v = this._val(); if(!isNaN(+v)) { return Number(v); } return v; } else { return this._val(value); } }; – carcus88 Feb 02 '18 at 18:06
4

Dude, the question is not how to overcome a problem, simply trying to understand how jQuery itself can return a `Number` **as the doc says**. And you can see the accepted answer showing why they wrote it, `` for example returns a `Number` **natively!**. – gdoron Feb 07 '18 at 11:37

How can val() return Number?

5 Answers5

Linked

Related