I'm making a down payment form where the user enters a purchase price and can then enter the amount they want to pay as a down payment as either a dollar amount, a percent down or by using a range slider. Modifying one field will modify the others as they type.
// $ Down and % Down are readonly until purchase price entered
$('.editable input').prop('readonly', true);
$('.purchase-price input').bind('blur', function () {
if( $(this).val() ) {
$('.editable input').prop('readonly', false);
} else {
$('.editable input').prop('readonly', true);
}
// Remove 0 value
$('.editable input').val('');
});
// Add commas as you type
$('.currency input').keyup(function (e) {
// skip for arrow keys
if (e.which >= 37 && e.which <= 40) return;
// format number
$(this).val(function (index, value) {
return value
.replace(/\D/g, "")
.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
;
});
});
// Convert variables with commas into numbers
function stringToNumber(number) {
var numberNoCommas = number.replace(/,/g, '');
return parseFloat(numberNoCommas);
}
// Only allow numbers in fields with the numbers class
$(".numbers").bind("keypress", function (e) {
var keyCode = e.which ? e.which : e.keyCode
if (!(keyCode >= 48 && keyCode <= 57)) {
return false;
}
});
// $ Amount Down
$('.amount-down input').on('input', function(){
var purchasePrice = stringToNumber( $('.purchase-price input').val() );
// Amount down can't exceed purchase price
if ($(this).val() > purchasePrice) {
$(this).val((purchasePrice));
}
var amountDown = stringToNumber( $(this).val() );
var howMuchDown = ( amountDown / purchasePrice ) * 100;
// Update % Down text field
$('.percent-down input').val( howMuchDown.toFixed(0) );
// Update Range slider
$('.down-payment input').val( amountDown ).trigger('change');
});
// % Amount down
$('.percent-down input').on('input', function(){
var purchasePrice = stringToNumber( $('.purchase-price input').val() );
// Percent down can't exceed 100%
if ( $(this).val() > 100 ) {
$(this).val(100);
}
var percentDown = $(this).val();
var howMuchDown = ( purchasePrice * stringToNumber(percentDown) ) / 100;
// Update $ Down text field
$('.amount-down input').val( Number((howMuchDown).toFixed(2)) );
// Update Range slider
$('.down-payment input').val( howMuchDown ).trigger('change');
});
// Range Slider
$('.down-payment input').on('input', function(){
var purchasePrice = stringToNumber( $('.purchase-price input').val() );
var rangeValue = $(this).val();
var howMuchDown = ( ( rangeValue * 100) / purchasePrice).toFixed(0);
// Amount Down
$('.amount-down input').val( Number(rangeValue).toLocaleString('en') );
// % Down
if(isNaN(howMuchDown)) {
howMuchDown = 0;
}
// Percent Down
$('.percent-down input').val(howMuchDown);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="field_12_45" class="purchase-price hide-instructions currency numbers"><label>What's the purchase price of the property?<input id="input_12_45" type="text" value="" class=""></div>
<br><br>
<div id="field_12_48" class="amount-down editable currency numbers"><label>$</label><input id="input_12_48" type="text" value="" class="" placeholder="0"></div>
<br><br>
<div id="field_12_47" class="percent-down editable numbers"><label>%</label><input id="input_12_47" type="text" value="" class="" placeholder="0"></div>
<br><br>
<div id="field_12_42" class="down-payment currency"><input id="input_12_42" type="range" step="1" min="0" value="" class="" max="500000"></div>
I would like to see if the code can be optimized further and I am concerned about performance and accuracy.