Jquery does not count correctly?

Question

I want to book a ticket with a free offer, these are the rules:

One person can buy 1 or more tickets, but limited to 4
He can make a minumum offer of 1 euro, but no limit, for tickets. So if he buys 4 tickets the offer will be at least 4 euros.

The check (validate()) happens after page loading and on every change or keyup event. All seems ok when I increase tickets to buy from 1 to 2, the offer increase from 1 to 2, as expected.

My issue:
When I leave "ticket" (first input) on 2 and I increase the offer, it does not exceed 9, at 10 it set the input value back to same value that is in the ticket input.

Also, if I hold arrow up to increase number until 50, for example, it's ok.

What's wrong?

My code is:

validate();

$('.input_data').on('change keyup', validate);

function validate() {
  control_tick = $("input[name='ticket']").val();
  if ((control_tick < 1) || (control_tick > 4)) {
    control_tick = 1;
    $("input[name='ticket']").val(control_tick);
  } else {
    $("input[name='ticket']").val(control_tick);
  }

  control_off = $("input[name='offer']").val();

  if (control_tick > control_off) {
    control_off = control_tick;
    $("input[name='offer']").val(control_off);
    console.log('prezzo minore di ticket');
  }
  if (control_off => control_tick) {
    $("input[name='offer']").val(control_off);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Ticket number (max 4):</label><br>
<input class="w3-input w3-center input_data" type="number" name="ticket" value="1" min="1" max="4" step="1">

<label>Offer €:</label>

<input class="w3-input w3-center input_data" type="number" name="offer" value="1" min="1" max="1000" step="1">

Please edit this for spelling and grammar. I'm not asking for perfect english, just something better than this. — Libra
– Libra, Commented Feb 26, 2020 at 17:20

ADyson · Accepted Answer · 2020-02-26 17:41:24Z

Cause

When you get the value of a field using .val(), that value is always of type string. Therefore when you compare the values using if (control_tick > control_off) {, you're comparing two strings, not two numbers. And in the rules of string comparison, "2" is considered to be "greater" than "10", because it compares each character one at a time, rather than the whole string, and clearly it regards "2" as greater than "1".

(Regarding holding the up arrow to 50, this will be ok because "50" (or rather, "5" is greater then "2" in string comparisons, just as it is in numeric comparisons. But if you hold it all the way to 100 it'll reset again - I'm sure you can work out why, by now.)

Solution

You need to parse your values as numbers before you attempt to compare them. Since these will always be whole numbers, we can use parseInt. This will ensure it does a numeric comparison instead.

See the demo below for a working example.

(Note also that removed the last if statement - apart from the slight syntax error (=> should be >=, although it doesn't cause a syntax error because it's valid, (but useless) as an arrow expression) it seemed redundant, because you're just populating the field with the same value you got from it a moment earlier. The else after the first if is also redundant for the same reason.)

validate();

$('.input_data').on('change keyup', validate);

function validate() {
  control_tick = parseInt($("input[name='ticket']").val());

  if ((control_tick < 1) || (control_tick > 4)) {
    control_tick = 1;
    $("input[name='ticket']").val(control_tick);
  }

  control_off = parseInt($("input[name='offer']").val());

  if (control_tick > control_off) {
    control_off = control_tick;
    $("input[name='offer']").val(control_off);
    console.log('prezzo minore di ticket');
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Ticket number (max 4):</label><br>
<input class="w3-input w3-center input_data" type="number" name="ticket" value="1" min="1" max="4" step="1">

<label>Offer €:</label>

<input class="w3-input w3-center input_data" type="number" name="offer" value="1" min="1" max="1000" step="1">

Collectives™ on Stack Overflow

Jquery does not count correctly?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related