Comparing the values of two text-fields using jQuery

Question

Consider the following HTML tables:

<table id="myTable1">
    <tr><td><input type="text" id="quantity1" name="quantity1" /></td></tr>
    <tr><td><input type="text" id="quantity2" name="quantity2" /></td></tr>
</table>

<table id="myTable2">
    <tr><td>
        <input type="text" id="total_quantity" name="total_quantity" />
        <input type="text" id="total_quantity_max" name="total_quantity_max" />
    </td></tr>
</table>

total_quantity_max contains a constant integer value, whereas
total_quantity will hold the SUM value based on the values of the quantity fields
value of total_quantity is updated everytime keyup is triggered on the quantity fields

What I'm trying to do is to alert the user the instant that the value in total_quantity becomes greater than the value in total_quantity_max.

At first I thought this could be achieved with something like:

$('#myTable1 input[id^=quantity]').live('keyup',function() {
    var n = $("#myTable2 #total_quantity").val();
    var m = $("#myTable2 #total_quantity_max").val();

    if(n > m) {
        alert("Alert!");
    }
});

However I'm encountering problems using the above code such as; the alert gets triggered even though the value in total_quantity clear is not > total_quantity_max.

You're comparing strings, not actual numbers..

Rob
– Rob

2011-10-12 13:43:43 +00:00
Commented Oct 12, 2011 at 13:43 — Rob
– Rob, Commented Oct 12, 2011 at 13:43
what are the actual values you get for n and m

Sleeperson
– Sleeperson

2011-10-12 13:44:18 +00:00
Commented Oct 12, 2011 at 13:44 — Sleeperson
– Sleeperson, Commented Oct 12, 2011 at 13:44

Patrick Desjardins · Accepted Answer · 2011-10-12 13:43:37Z

2

It's because the comparison is done with string and not number. Try to use parseFloat.

$('#myTable1 input[id^=quantity]').live('keyup',function() {
    var n = $("#myTable2 #total_quantity").val();
    var m = $("#myTable2 #total_quantity_max").val();

    if(parseFloat(n) > parseFloat(m)) {
        alert("Alert!");
    }
});

answered Oct 12, 2011 at 13:43

Patrick Desjardins

142k89 gold badges298 silver badges346 bronze badges

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

1 Comment

Angelo Tan Over a year ago

Ah Strings. I always assumed those are automatically read as integers. Thanks the code's working now!

Dennis · Accepted Answer · 2011-10-12 13:42:57Z

2

Use parseInt - val will return a string and strings have different comparison rules from integers.

if(parseInt(n, 10) > parseInt(m, 10)) {
    alert("Alert!");
}

answered Oct 12, 2011 at 13:42

Dennis

32.7k12 gold badges66 silver badges79 bronze badges

3 Comments

riwalk Over a year ago

Always use parseInt(n,10). If n were 09 and m were 04, your if statement would fail.

Rob Over a year ago

Nah, he should use TryParse, if his string contains anything else than a number it would fail anyway

Dennis Over a year ago

@Rob You mean this C# function?

Collectives™ on Stack Overflow

Comparing the values of two text-fields using jQuery

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related