Comparing an input value in an if condition

Question

I'm trying enable/disable an input button with a simple if condition in jQuery but somehow the if is working but the else if won't work. I'm trying to enable the input button in a range between 0 - 40. The button enables when putting in a number above 0 but won't disable when I'm above 40. What am I doing wrong?

$(document).ready(function() {
  $('#btn').prop('disabled', true);
  
  $('#temp').keyup(function() {
    if ($('#temp').val() > '40') {
      $('#btn').prop('disabled', true);
    } else if ($('#temp').val() > '0') {
      $('#btn').prop('disabled', false);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST" action="/mainpage">
  <div>
    <label>Temperatur in <strong>°C</strong>:</label>
    <input type="number" id="temp" name='temperatur'> </input>
    <input type="submit" id="btn" class="btn btn-info btn-lg" name="button" value="Weiter">
  </div>
</form>

What is the value of `$("#temp").val()` when it doesn't work? — T.J. Crowder, Feb 01 '20 at 16:40

score 3 · Answer 1 · answered Feb 01 '20 at 16:42

You're doing a string comparison with strings of digits, which can be surprising. For instance, "20" > "5" is false, because "5" is greater than "2".

I suspect that's what's catching you off guard. Convert to number before doing the comparisons:

var value = +$("#temp").val();
// −−−−−−−−−^
if (value > 40) {
//          ^−−−−−− no quotes
   $('#btn').prop('disabled', true);
} else if (value > 0) {
// No quotes −−−−−−^
     $('#btn').prop('disabled', false);
}

There are lots of different ways to convert strings to numbers. In the above I'm using a unary +, but see my answer here for a full list with pros and cons.

I should note that it seems odd to be disabling the input when the value is > 40 but only enabling it if the value is 1-39. Perhaps

$("#btn").prop("disabled", +$("#temp").val() > 40);

That will disable when the value is > 40, enable when it's <= 40.

I keep see you everywhere, great engineer! – ROOT Feb 01 '20 at 16:50 — ROOT, Feb 01 '20 at 16:50
Thanks for all the answers! :) – dswiss Feb 01 '20 at 17:16 — dswiss, Feb 01 '20 at 17:16

score 2 · Answer 2 · answered Feb 01 '20 at 16:45

The issue is because val() returns a string, so you're comparing string values, not integer values. As such you're relying on implicit coercion of the types which can lead to odd behaviour - as you've discovered.

To fix this use numeric values for the condition, which can be achieved by using integer literals and parseFloat(). Try this:

jQuery(function($) {
  let $btn = $('#btn').prop('disabled', true);

  $('#temp').keyup(function() {
    var value = parseFloat($(this).val()) || 0;
    $btn.prop('disabled', value <= 0 || value > 40);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST" action="/mainpage">
  <div>
    <label>Temperatur in <strong>°C</strong>:</label>
    <input type="number" id="temp" name="temperatur" />
    <input type="submit" id="btn" class="btn btn-info btn-lg" name="button" value="Weiter" />
  </div>
</form>

PS, I'd use the `"input"` event on an `input` (to allow for paste etc...), also `this.value` seems cleaner than `$(this).val()`. — Roko C. Buljan, Feb 01 '20 at 17:38

Nguyễn Văn Phong · Accepted Answer · 2020-02-01T16:58:15.403

You should not compare string value like that. Compare number instead like below.

$(document).ready(function() {
     $('#btn').prop('disabled', true);
     
     $('#temp').keyup(function() {
        var temp = parseInt($('#temp').val());
        
        if(temp > 40) {
           $('#btn').prop('disabled', true);
        } else if(temp > 0) {
          $('#btn').prop('disabled', false);
        }

   });
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Temperatur in <strong>°C</strong>:</label>
<input type="number" id="temp"  name='temperatur'> </input>

<input type="submit"  id="btn" class="btn btn-info btn-lg" name = "button" value="Weiter" >

Comparing an input value in an if condition

3 Answers3