Compare values in two input fields

Question

I have two input fields and i am wondering how do i compare value's between these two fields.

<input id="start" type="numeric" value="" />

        <input id="end" type="numeric" value="" />

In above input fields, if the value in input field with id='start' is greater than id='end' , i want to display an alert.

I tried below but not working

    if ($("#end").val()  > $("#start").val()) {

            //do something

    }else {
            alert('Wrong Input');
        }

What am i doing wrong???

Answer 1

You should bind an event handler such as ' keypress ' to one of the fields. When that even is triggered, you should compare the values of both the input fields and show alert if necessary.

Additionally, type="number" is correct not "numeric" .

Here's a working fiddle-

http://jsfiddle.net/pe2ZE/

Answer 2

Use type="number" , As per my knowledge there is type as such numeric

Code

if (+$("#end").val() > +$("#start").val()) {
    //do something
} else {
    alert('Wrong Input');
}

Here I have use + to convert value to integer

Answer 3

you are comparing strings $("#end").val() > $("#start").val() so you have to compare in numbers, and dont forget about the radix

if(parseInt($("#end").val(),10)  > parseInt($("#start").val(),10))

and type="numeric" is a wrong syntax, use type="number"

<input id="start" type="number" value="" />

Answer 4

You need to use type="number" to make the script work:

<input id="start" type="number" value="" />
<input id="end" type="number" value="" />

Demo

Or you can use input type text and then parse the input using parseInt(val) and compare them. somethink like this:

if (parseInt($("#end").val()) > parseInt($("#start").val())){
   //rest code
}

Answer 5

you can't use type="numeric" to make input numeric only

to solve this proplem use this code

HTML

<input type="tel" name="name">

jQuery

    // HTML Text Input allow only Numeric input
    $('[type=tel]').on('change', function(e) {
        $(e.target).val($(e.target).val().replace(/[^\d\.]/g, ''))
    })
    $('[type=tel]').on('keypress', function(e) {
        keys = ['0','1','2','3','4','5','6','7','8','9','.']
        return keys.indexOf(event.key) > -1
    })

Answer 6

You have to type cast the value to int just like

if (parseInt($("#end").val())  > parseInt($("#start").val())) {

            //do something

    }else {
            alert('Wrong Input');
        }