Trouble using typeof operator in jQuery

Question

This will be the first time on SO I don't preface my question with, "I'm new to programming" (whoops). I'll get right into it:

Here's my HTML code:

<div class="hide" id="hide2">
    <div class="inputselect">   
    <p>
        <label>What is your budget?</label>
        </p>
        <p>
            Minimum: $<input type="text" id="minBud" name='minBud'><br />
            Maximum: $<input type="text" id="maxBud" name='maxBud'><br />
        <br />
        </p>
        <button type="button" class="next" id="next3">Next</button>
        <button type="button" class="prev" id="prev2">Previous</button> 
    </div>
</div>

Here's the jQuery/javascript code snippet I'm struggling with:

$("#next3").click(function(){
    if (typeof $("#minBud").val() === "number" && typeof $("#maxBud").val() === "number") { 
        gunsPrice();
        $("#hide3").slideDown("fast");
        $("#hide2").slideUp("fast");
    } else {
        alert("Please only enter NUMBERS into the budget fields");
    }
});

What I'd like to see happen is: if the entries the the minBud and maxBud fields are numbers, run gunsPrice() and present the next question (HTML form).

I've tried altering the syntax several different ways, but no matter how I do it, numbers continue to trigger the alert.

Note: I can get the typeof operator to function correctly within gunsPrice() (using variables gathered with getElementById, but that doesn't do me any good within this application; it always moves to the next question (due to the way I've set up the jQuery code).

Thanks!

You should echo out typeof and see what the code thinks it is. Likely "string" since it came from a form element. — Cfreak, Apr 29 '13 at 01:59
`val` always returns a string. You need to parse it to validate that what the user entered is a valid number. — Dennis, Apr 29 '13 at 02:00
Post a jsfiddle with your code. In the meantime, console.log() the .val() of both inputs separately from your if/then. Verify what the typeof for each is. — Geuis, Apr 29 '13 at 02:00
according to the documentation val() can return number but the documentation fails to mention in what situation it will return a number. http://api.jquery.com/val/ — HMR, Apr 29 '13 at 02:02
I tried Cfreak's suggestion (not sure why I didn't think of that before...), and the variables are recognized as 'object'. I'm assuming it's in bad taste to change my condition from "number" to "object" :) — Remo Williams, Apr 29 '13 at 02:06
Hey Geuis, I'm a little embarrassed, but I'm not sure what a jsfiddle is...I'll definitely look it up though. Thanks for the tip — Remo Williams, Apr 29 '13 at 02:10

Musa · Accepted Answer · 2013-04-29T03:16:47.730

3

.val() always return a string for inputs. so you condition will always evaluate to false. You can however check to see if the results only contain digits(if that's what you're looking for)

if (/^\d+$/.test($("#minBud").val()) && /^\d+$/.test($("#maxBud").val())) {

edited Apr 29 '13 at 03:16

answered Apr 29 '13 at 02:01

Musa

89,286
16
105
123

According to jQuery documentation val() can return number but then fails to mention when it would return a number http://api.jquery.com/val/ I gues the easiest way is to isNaN(parseFloat($("something").val())) – HMR Apr 29 '13 at 02:05
@HMR it does say that though I'm unable to get a result that wasn't a string(or array of string). – Musa Apr 29 '13 at 02:11
There is some [discussion here](http://stackoverflow.com/questions/9227268/how-can-val-return-number). `type=text` likely won't ever return a number, though. – Dennis Apr 29 '13 at 02:11
@HMR It happens exactly when el.value gets you a number. That will happen, at least in chrome, for the HTML5 `` – Paul Apr 29 '13 at 02:12
@Musa I like the logic, but unfortunately it didn't work (same result as originally). – Remo Williams Apr 29 '13 at 02:17
@Paulpro I've tried it but keeps returning string, checking $.valHooks the only objects there are: checkbox, option, radio and select. Maybe the html 5 isn't valid I do have as the first line and input type='number' – HMR Apr 29 '13 at 02:32
@Musa Oh. I was mistaken. Thanks for making the jsfiddle to show me. – Paul Apr 29 '13 at 02:32
@RemoWilliams I had a mistake in my post try now – Musa Apr 29 '13 at 02:39
@Paulpro using jQuery 1.9.0 and adding a hook for number it still returns string until I add $.valHooks.text it finally returns number. Validated the document and it's html 5 no errors and the input IS type number. I guess in theory this should work but there is a bug in jQuery that prevents it from working correctly. – HMR Apr 29 '13 at 02:40
@Musa that did the trick. Thanks! I got this to work right after you posted your correction: `if (($("#minBud").val() * 0) === 0 && ($("#minBud").val() * 0) === 0) {`. Yours, however, is cooler than mine :) – Remo Williams Apr 29 '13 at 02:44
@Paulpro I see in the jQuery source it tries to get the type like so: elem.type but that returns "text" even though it's type is set to number. If I do elem.attributes.getNamedItem("type").value I get "number" This might be a bug in Firefox, have validated html as html 5. Can anyone confirm this? (this does not happen in Chrome) – HMR Apr 29 '13 at 02:47
@HMR Firefox hasn't implemented `input[type=number]` yet - the value of the type *attribute* is number, but the type *property* is still "text". – Dennis Apr 29 '13 at 02:57
@Dennis thanks, just figured it out and ajusted my answer. I thought it was a bug in FireFox so my answer sugggest adding .getAttribut and add a data-type="number" attribute. – HMR Apr 29 '13 at 03:03
`.val()` may also return an array (for `select` elements with the `multiple` property) and, as per [documentation](http://api.jquery.com/val/) may also return a number (as shown in the already linked [discussion](http://stackoverflow.com/questions/9227268/how-can-val-return-number)). – Fabrício Matté Apr 29 '13 at 03:10
yes but you don't need to do anything to have jQuery return an array as it has $.valHooks.select.get If you'd like to have it return a number you have to add something to the $.valHooks.[someting].get yourself. – HMR Apr 29 '13 at 03:13
Yeah I'm just commenting as the first statement in this answer "`.val()` always return a string." may be true for this use case, but is not 100% accurate. – Fabrício Matté Apr 29 '13 at 03:15

HMR · Answer 2 · 2013-04-29T03:08:11.403

I now see that you can add hooks in jQuery so .val() can return a number. You can hook into val() using the following code:

$.valHooks.text={
  get:function(elem){
    var i=parseFloat(elem.value,10);
    return (isNaN(i))?elem.value:i
  }
}

Now val() of any input type text will return a string or number depending if it can be converted.

This might be confusing though because the input type is TEXT.

You could use $valHooks.number and set the input of type number but tried this in Firefox 20.0.1 and didn't work.

This because jQuery tries to get the hook using

jQuery.valHooks[ elem.type ]

Since FireFox will return "text" when asking for an elem.type of type "number" it'll not call your hook and return the elem.value property wich is string. This is probably a bug in FireFox as

elem.getAttribute("type")

returns "number"

A way to overcome this bug is to go into jQuery source code and change the following line:

hooks = jQuery.valHooks[ elem.type ] || jQuery.valHooks[ elem.nodeName.toLowerCase() ];

to

hooks = jQuery.valHooks[ elem.type ] || jQuery.valHooks[ elem.nodeName.toLowerCase() ]
  || jQuery.valHooks[ elem.getAttribute("data-type") ];

Now in your html you can specify a number input field by:

<input type="number" data-type="number" ...

And add a nubmer hook:

$.valHooks.number={...//see code above for the rest

I guess hooks is a good way to implement type conversion as it centralises conversion. Too bad FireFox is not playing along and too bad the jQuery code does not support setting hooks for other attributes (except node name and node.type). Just added this for completion and future reference. — HMR, Apr 29 '13 at 03:10

score 0 · Answer 3 · edited Apr 29 '13 at 02:25

0

In $("#minBud").val(), #minBud is an input or textarea.

Your operation:

typeof $("#minBud").val()

is a "String".

parseInt($("#minBud").val(),10) === null

edited Apr 29 '13 at 02:25

Simon M

2,847
2
20
37

answered Apr 29 '13 at 02:05

GoodLuckBamboo

87
1
2

Where exactly in the documentation say it will return a string when getting .val() from a textbox? http://api.jquery.com/val/ it says clearly it can return number but just doesn't say in what situation. – HMR Apr 29 '13 at 02:07
`parseInt` will return `NaN` if an integer cannot be parsed, not `null` – Dennis Apr 29 '13 at 02:08

Trouble using typeof operator in jQuery

3 Answers3