Jquery bind number inputs don't work when increasing the cardinality by ten (1000, 10000, 100000, etc.),
I have two input numbers related to each other that are incremented by 1000, one is the top range and one is the bottom. Whenever the lower range is set above the upper range, the upper range automatically changes the "value" and "min" attributes to match the lower value of the range.
However, every time the upper range input reaches ten thresholds (9000, 90,000, etc.) from an increase in the lower range value, it simply stops while the lower range can continue. Does anyone know why this is and how to stop it?
https://jsfiddle.net/tg0ck5r1/
HTML:
<input type="number" id="upperBidRange" step="1000" >
<input type="number" id="lowerBidRange" step="1000" min="1000" value="1000">
JS:
function SetBidIncrementAmountAndUpperBidRangeMins() {
$('#upperBidRange').attr('min', $('#lowerBidRange').val());
}
function SetBidIncrementAmountAndUpperBidRangeValues() {
$('#upperBidRange').val($('#lowerBidRange').val())
}
$(SetBidIncrementAmountAndUpperBidRangeMins);
$(SetBidIncrementAmountAndUpperBidRangeValues);
$('#lowerBidRange').bind('keyup mouseup onwheel input keypress change paste', function () {
SetBidIncrementAmountAndUpperBidRangeMins();
if ($('#lowerBidRange').val() > $('#upperBidRange').val()) {
$(SetBidIncrementAmountAndUpperBidRangeValues);
}
});
source to share
input
the string is always stored String , so .val()
or this.value
will always give you a string.
Doing if (String > String) {
it won't give you the right reason why you want numbers
Use MDN Docs insteadparseInt(value, radix)
parseInt( $('#lowerBidRange').val() , 10 )
Here's how:
jQuery(function($) {
// DOM is now ready and $ alias secured
var $upper = $('#upperBidRange'),
$lower = $('#lowerBidRange');
function setUpperMin() {
$upper.attr('min', $lower.val());
}
function setUpperVal() {
$upper.val($lower.val());
}
setUpperMin();
setUpperVal();
$lower.on('input', function() {
setUpperMin();
var lowerVal = parseInt(this.value, 10),
upperVal = parseInt($upper.val(), 10);
if (lowerVal > upperVal) {
setUpperVal();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="upperBidRange" step="1000">UPPER
<br>
<input type="number" id="lowerBidRange" step="1000" min="1000" value="1000">LOWER
A simple option would be to use unary +
String -> Number Conversion
$lower.on('input', function() {
setUpperMin();
if (+this.value > +$upper.val()) {
setUpperVal();
}
});
source to share