仅当在表单中选择数字 4 到 9 时，才会显示 IF 语句

Question

我有一个表格，允许用户选择可用数量的产品。如果用户选择数字 4 到 9，而可用的数字超过 10，则会显示我的验证语句。我使用控制台.log查看数字是否正确提交并且一切看起来都很好，if 语句不应该出现，因为 4-9 不大于可用值。

形式：

<form action="add_cart.php" method="POST" id="add_product_form">
<input type="hidden" name="product_id" value="<?=$id;?>">
<input type="hidden" name="available" id="available" value="">
<div class="form-group">
<div class="col-xs-9">
<label for="quantity">Quantity</label>
<input type="number" class="form-control" id="quantity" 
name="quantity" min = "0" value="">
</div>
<div class="col-xs-9"></div>
<br><br><br>
</div>
<div class="form-group">
<div class="col-xs-9">
<label form="size">Size:</label>
<select name="size" id="size" class="form-control">
<option value="" disabled selected hidden>Choose Size</option>
<?php
foreach ($size_array as $string) {
$string_array = explode(':', $string);
$size = $string_array[0];
$available = $string_array[1];
if ($available > 0) {
echo '<option value="'.$size.'" data-available="'.$available.'">'.$size.' 
('.$available.' available)</option>';
}
}
?>
</select>
</div>
</div>

<option value="28" ></option>
</form>

</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default" onclick="closeModal();">Close</button>
<button class="btn btn-warning" onclick="add_to_cart(); return 
false;">Add To Cart <span class=" glyphicon glyphicon-shopping-cart"></span> . 
</button>
</div>
</div>

jQuery('#size').change(function(){
var available = jQuery('#size option:selected').data("available");
jQuery('#available').val(available);
});

按下提交按钮时，此方法将运行：

function add_to_cart(){
var size = jQuery('#size').val();
var quantity = jQuery('#quantity').val();
var available = jQuery('#available').val();
var error = '';
var data = jQuery('#add_product_form').serialize();
jQuery('#modal_errors').html("");
if(size == '' ||  quantity == '' || quantity == 0 ){
error += '<p class="text-danger text-center"> You must choose a quantity. 
</p>';
jQuery('#modal_errors').html(error);
return;
}
else if (quantity > available ){
error +='<p class="text-danger text-center"> Sorry, it looks like we only have
'+available+' available at this time.</p>';
jQuery('#modal_errors').html(error);
}
else{
jQuery.ajax({
url: '/onlineStore/admin/parsers/add_cart.php',
method: 'POST',
data: data,
success: function(){
location.reload();
},
error: function(){alert("something went wrong.");}
});
}
}

仅当选择数字 4 到 9 时，(数量>可用)if 语句才会在不应该显示时显示。我不知道为什么会这样。

Answer 1

由于字段的值是字符串，因此您可以比较字符串，而不是数字。将值转换为数字，使用+或parseInt：

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

在这种情况下，您还应该查找将空字符串或某些非数字字符串转换为数字时发生的NaN值。