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!

Answer 1

.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())) {

Answer 2

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

Answer 3

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

Your operation:

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

is a "String".

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