How can val() return Number?
Solution 1
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>
Solution 2
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);
Solution 3
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.
Solution 4
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())
.
Solution 5
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()
Comments
-
gdoron is supporting Monica almost 2 years
In the
val
docs written this description:.val() Returns: String, Number, Array
I tried to get a
Number
, but it seems to returnstring
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.
-
gdoron is supporting Monica about 12 yearsI know that, I'm asking how can
val
return number as the docs says, not how can I parse the string. -
Felix Kling about 12 yearsAlso see the HTML5 draft (the return value is
double
). -
Felix Kling about 12 years@gdoron: It says: [...] form elements such as
input
,select
andtextarea
[...]. Now, I'm not a native English speaker, but it sounds to me that this is not meant to be an exhaustive list. -
gdoron is supporting Monica about 12 yearsSomething weird:
alert($("#prog").val() === 50);//false
andalert($("#prog").val() === '50'); //false
. HOW? -
pimvdb about 12 yearsIt looks like it returns a number by default.
$("<progress value='50' max='100'>").get(0).value === 50
. -
Glenn over 9 yearsThe first link is broken.
-
gdoron is supporting Monica over 6 yearsWhile correct, it doesn't answer the (very old) question.
-
carcus88 about 6 yearsSure 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); } };
-
gdoron is supporting Monica about 6 yearsDude, 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,<progress>
for example returns aNumber
natively!. -
Gibin Ealias over 4 yearsUsing the unary operators
-
,+
and~
before the$
will also return a number.+$('#gdoron').val();