JS - detecting when user clears a field
I'm building a calculator for my current web project, it works pretty well, but as I played with it, it occurred to me that clearing the third field was causing the script to output NaN.
I am new to Javascript and I tried to do
if($('#field11').val() == '' || $('#field12').val() == '' || $('#field13').val() == ''){
$('#result1').text('')
}
But that won't solve the problem. I was looking for a solution to this problem, but as if no one else on the internet had such a problem! I need to clear the output (# result1) if any of the inputs get cleared.
This is my complete code:
$(document).ready(function(){
$('#field11').keyup(function(){
if($('#field12').val() != '' && $('#field13').val() != ''){
$('#result1').text(commafy(Math.round( $('#field11').val() + $('#field12').val() / $('#field13').val() * 1.5)) + ",99");
}
});
$('#field12').keyup(function(){
if($('#field11').val() != '' && $('#field13').val() != ''){
$('#result1').text(commafy(Math.round( $('#field11').val() + $('#field12').val() / $('#field13').val() * 1.5)) + ",99");
}
});
$('#field13').keyup(function(){
if($('#field11').val() != '' && $('#field12').val() != ''){
$('#result1').text(commafy(Math.round( $('#field11').val() + $('#field12').val() / $('#field13').val() * 1.5)) + ",99");
}
});
if($('#field11').val() == '' || $('#field12').val() == '' || $('#field13').val() == ''){
$('#result1').text('')
}
});
Here is a working JSFiddle code: https://jsfiddle.net/x7a91bnx/
Thank!
source to share
You can improve your logic using DRY principles. Since all handlers keyup
are doing the same logic, you can extract it into your own function. Then in this function you can get each field value by setting it to 0
if it is empty. You can also check what #field13
matters before doing the calculation to avoid division by zero problems. Also note that the function commafy()
could be simplified as well.
Try the following:
$(document).ready(function () {
$('#field11, #field12, #field13').keyup(calculate);
});
function commafy(num) {
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
}
function calculate() {
var field11 = parseFloat($('#field11').val()) || 0;
var field12 = parseFloat($('#field12').val()) || 0;
var field13 = parseFloat($('#field13').val()) || 0;
var result = field13 == 0 ? 0 : commafy(Math.round(field11 + field12 / field13 * 1.5)) + ",99";
$('#result1').text(result);
}
source to share
Your intuition for checking each input was correct, but you should check it every time before a calculation occurs, not just once after loading the document. In the example:
$('#field13').keyup(function () {
if ($('#field11').val() !== '' || $('#field12').val() !== '' || $('#field13').val() !== '') {
$('#result1').text(commafy(Math.round(parseFloat($('#field11').val()) + parseFloat($('#field12').val()) / parseFloat($('#field13').val()) * 1.5)) + ",99");
} else {
$('#result1').text('');
}
});
source to share