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???

type="number", As per my knowledge there is type as such numeric — Satpal
– Satpal, Commented May 24, 2014 at 8:06
When do you test the values? Is the code above part of a button or submit handler? — Paul
– Paul, Commented May 24, 2014 at 8:09

halkujabra · Accepted Answer · 2014-05-24 08:07:57Z

4

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/

answered May 24, 2014 at 8:07

halkujabra

2,9524 gold badges28 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Satpal · Accepted Answer · 2014-05-24 08:07:36Z

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

answered May 24, 2014 at 8:07

Satpal

134k13 gold badges168 silver badges171 bronze badges

1 Comment

Satpal Over a year ago

@Richa, It happens with all of us.

Govind Singh · Accepted Answer · 2014-05-24 08:38:55Z

2

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="" />

edited May 24, 2014 at 8:38

answered May 24, 2014 at 8:09

Govind Singh

15.5k14 gold badges77 silver badges109 bronze badges

Comments

Milind Anantwar · Accepted Answer · 2014-05-24 08:12:13Z

1

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
}

answered May 24, 2014 at 8:12

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

1 Comment

Richa Over a year ago

Thank a lot.Got it solved. That was some silly mistake

Mahdi Sahib · Accepted Answer · 2017-06-09 15:22:31Z

1

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
    })

answered Jun 9, 2017 at 15:22

Mahdi Sahib

1401 silver badge10 bronze badges

Comments

Visruth · Accepted Answer · 2014-05-24 08:08:09Z

0

You have to type cast the value to int just like

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

            //do something

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

answered May 24, 2014 at 8:08

Visruth

3,45037 silver badges50 bronze badges

Collectives™ on Stack Overflow

Compare values in two input fields

6 Answers 6

Comments

1 Comment

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

1 Comment

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related