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

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/

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

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

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

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

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

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 }

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

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

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

You have to type cast the value to int just like

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

Collectives™ on Stack Overflow

Compare values in two input fields

6 Answers 6

Comments

1 Comment

Comments

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

1 Comment

Comments

1 Comment

Comments

Comments

Related