I have a html page that has input fields for the user to enter the quantity of fruits. On key press/ key up, it is suppose to call the javascript file method and checks if it is a digit. If it is not a digit, the textbox field will be cleared. However, my textbox is not cleared when i tried to enter a non numerical value. Is there something missing in my code?
Html
<div class="form-group ">
<label class="control-label " for="name"> Name </label>
<input class="form-control" id="name" name="name" type="text" /> <span class="help-block" id="hint_name"> Enter your name </span>
</div>
<div class="form-group ">
<label class="control-label" for="apple"> Apple ( 69cents ) </label>
<input class="form-control form-control-input" id="apple" name="apple" type="text" autoplete="off" onkeyup="isNumber(this,event)" /> <span class="help-block" id="hint_number"> Enter Qty </span>
</div>
<div class="form-group ">
<label class="control-label" for="orange"> Orange ( 59cents ) </label>
<input class="form-control form-control-input" id="orange" name="orange" type="text" autoplete="off" onkeyup="isNumber(this,event)" /> <span class="help-block" id="hint_number1"> Enter Qty </span>
</div>
<div class="form-group ">
<label class="control-label" for="banana"> Banana ( 39cents ) </label>
<input class="form-control form-control-input" id="banana" name="banana" type="text" autoplete="off" onkeyup="isNumber(this,event)" /> <span class="help-block" id="hint_number2"> Enter Qty </span>
</div>
Javascript
function isNumber(idValue, evt) {
evt = (evt) ? evt : window.event;
var sum = 0;
var costOfApple = 0;
var costOfOrange = 0;
var costOfBanana = 0;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
document.getElementById('idValue.id').value = "";
document.getElementById('totalCost').value = "NaN";
$("#invalid-alert").fadeTo(2000, 500).slideUp(500, function() {
$("#invalid-alert").slideUp(500);
});
} else {
costOfApple = document.getElementById('apple').value * 69;
costOfOrange = document.getElementById('orange').value * 59;
costOfBanana = document.getElementById('banana').value * 39;
sum = (Number(costOfApple) + Number(costOfOrange) + Number(costOfBanana)) / 100;
document.getElementById('totalCost').value = "$" + (sum).toFixed(2);
}
}
I have a html page that has input fields for the user to enter the quantity of fruits. On key press/ key up, it is suppose to call the javascript file method and checks if it is a digit. If it is not a digit, the textbox field will be cleared. However, my textbox is not cleared when i tried to enter a non numerical value. Is there something missing in my code?
Html
<div class="form-group ">
<label class="control-label " for="name"> Name </label>
<input class="form-control" id="name" name="name" type="text" /> <span class="help-block" id="hint_name"> Enter your name </span>
</div>
<div class="form-group ">
<label class="control-label" for="apple"> Apple ( 69cents ) </label>
<input class="form-control form-control-input" id="apple" name="apple" type="text" autoplete="off" onkeyup="isNumber(this,event)" /> <span class="help-block" id="hint_number"> Enter Qty </span>
</div>
<div class="form-group ">
<label class="control-label" for="orange"> Orange ( 59cents ) </label>
<input class="form-control form-control-input" id="orange" name="orange" type="text" autoplete="off" onkeyup="isNumber(this,event)" /> <span class="help-block" id="hint_number1"> Enter Qty </span>
</div>
<div class="form-group ">
<label class="control-label" for="banana"> Banana ( 39cents ) </label>
<input class="form-control form-control-input" id="banana" name="banana" type="text" autoplete="off" onkeyup="isNumber(this,event)" /> <span class="help-block" id="hint_number2"> Enter Qty </span>
</div>
Javascript
function isNumber(idValue, evt) {
evt = (evt) ? evt : window.event;
var sum = 0;
var costOfApple = 0;
var costOfOrange = 0;
var costOfBanana = 0;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
document.getElementById('idValue.id').value = "";
document.getElementById('totalCost').value = "NaN";
$("#invalid-alert").fadeTo(2000, 500).slideUp(500, function() {
$("#invalid-alert").slideUp(500);
});
} else {
costOfApple = document.getElementById('apple').value * 69;
costOfOrange = document.getElementById('orange').value * 59;
costOfBanana = document.getElementById('banana').value * 39;
sum = (Number(costOfApple) + Number(costOfOrange) + Number(costOfBanana)) / 100;
document.getElementById('totalCost').value = "$" + (sum).toFixed(2);
}
}
-
1
document.getElementById(idValue.id).value = "";– Agney Commented Oct 30, 2017 at 6:59
4 Answers
Reset to default 2Problem statement is
document.getElementById('idValue.id').value = "";
You are passing string 'idValue.id' to the function and the element with ID doesn't exists, thus the code is not working and you must be getting error in the browser console.
As idValue refers to element which invoke the event handler. You can just use it directly to set its property.
idValue.value = ""
I thinks
document.getElementById('idValue.id').value = "";
should be
document.getElementById(idValue.id).value = "";
or
idValue.value = "";
and , It's good to console.dir( idValue ) in isNumber function!
test please!
you are passing this to a function , and this is here the input you should use it as an object not as a string.
don’t do that :
document.getElementById('idValue.id').value = "";
try this instead
document.getElementById(idValue.id).value = "";
$(document).on('change', 'input', function() {
if($('#Id').val() == "" ) {
// Do something
}
});
OR
document.getElementById(yourID).value = "";