Javascript else if statement doesn't work

Question

I'm working on a website for school and i need to make a shopping cart.When i check if the quantity asked is grater than the amount available it returns true even if it's not. for example 3 > 12 is true and i get the error message. I have misspelled "available".. i know :( Here's my function :

function add_to_cart() {

   jQuery ('#modal_errors').html("");

   var size = jQuery('#size').val();
   var quantity = jQuery('#quantity').val();
   var avaliable = jQuery('#avaliable').val();
   var error = '';
   var data = jQuery('#add_product_form').serialize();

   if( size == '' || quantity == '' || quantity == 0 ){
      error +='<p class = "text-danger text-center">You need to select a size and quantity.</p>';
      jQuery('#modal_errors').html(error);
      return;
  }
  else if(quantity > avaliable){
      error +='<p class = "text-danger text-center">There are only '+avaliable+' avaliable and you asked for '+quantity+'.</p>';
      jQuery('#modal_errors').html(error);
      return;
  }
}

This returns the message(for my case) : " There are only 12 avaliable and you asked for 3.

This might be a noob mistake but i can't figure it out. Any help please?

Edit ->>

Used

var quantity = Number.parseInt(jQuery('#quantity').val());
var avaliable = Number.parseInt(jQuery('#avaliable').val());

and it works but now im in mists again :D

I get the values like this

    <div class="form-group">
                <div class="col-xs-3"><label for="quantity">Quantity:</label>
                  <input type="number" class="form-control" id="quantity" name="quantity" min="0"></div><br><div class="col-xs-9">&nbsp;</div>
              </div>

input type being number i assumed i dont need to convert from string to number. doesn't the input type number = to an actual number than can be compared or multiplyed or whatever?

Thanks for the answer :)

Answer 1

Because your quantity and avaliable are strings, not numbers. And the comparison is going through strings.

Try to do

var quantity = Number.parseInt(jQuery('#quantity').val());
var avaliable = Number.parseInt(jQuery('#avaliable').val());

Edited

or you can do parsing only in the condition, if you want to use them as strings

else if(Number.parseInt(quantity) > Number.parseInt(avaliable)){

}

Answer 2

As stated elsewhere, you need to convert the strings to numbers, but once you do that you need to check whether they have successfully converted to a number, especially as you are already checking the strings are not empty. isNaN is a useful function here. You can check the strings, then check the numbers, something like:

function add_to_cart() {
    var error = "";

    var size = jQuery('#size').val();
    var quantity = jQuery('#quantity').val();
    var avaliable = jQuery('#avaliable').val();

    if (size === '' || quantity === '' || avaliable === '' ) {
        error += '<p class = "text-danger text-center">You need to select a size and quantity.</p>';
    } else {
        var sizeNum = Number.parseInt(size),
            quantityNum = Number.parseInt(quantity),
            avaliable = Number.parseInt( avaliable );

        if ( isNaN( quantityNum ) || quantityNum === 0 || isNaN( sizeNum ) || sizeNum === 0 ) {
            error += '<p class = "text-danger text-center">You need to select a size and quantity.</p>';
        }
        else if ( quantityNum > avaliableNum ) {
            error += '<p class = "text-danger text-center">There are only ' + avaliable + ' avaliable and you asked for ' + quantity + '.</p>';
        }
    }

    jQuery('#modal_errors').html(error);
}