I’m trying to make a simple inventory systems. But I’m having problem with my oninput event.
I want to make TOTAL GOODS to be “Please input number in GOODS IN ” whenever every non number value inserted into GOODS IN. But it seems I can’t make it so.
JavaScript
x
34
34
1
/*MAKE EVERY TABLE CLICKABLE AND SHOW ROW DATA IN INPUT TEXT*/
2
3
var tbGoods = document.getElementById('tbGoods');
4
for (var i = 0; i < tbGoods.rows.length; i++) {
5
tbGoods.rows[i].onclick = function() {
6
document.getElementById("idTxt").value = this.cells[1].innerHTML;
7
document.getElementById("gdTxt").value = this.cells[2].innerHTML;
8
document.getElementById("qtyTXT").value = this.cells[3].innerHTML;
9
10
var qty = parseInt(document.getElementById('qtyTXT').value);
11
var x = parseInt(document.getElementById('gdin').value);
12
var result = qty - x;
13
document.getElementById('totalgd').value = result;
14
15
16
};
17
}
18
19
/*MAKE EVERY NUMBER I PUT IN GOODS IN, TO BE CALCULATED WITHOUT SUBMIT BUTTON (ONINPUT)*/
20
21
function testmin() {
22
var qty = parseInt(document.getElementById('qtyTXT').value);
23
var x = parseInt(document.getElementById('gdin').value);
24
var result = qty - x;
25
if (document.getElementById('gdin').value === '') {
26
document.getElementById('totalgd').value = '0';
27
} else if (document.getElementById('qtyTXT').value === '') {
28
document.getElementById('totalgd').value = '0';
29
} else if (Number.isNaN(document.getElementById('gdin').value)) {
30
document.getElementById('totalgd').value = 'Please Input Number in Goods In';
31
} else {
32
document.getElementById('totalgd').value = result;
33
}
34
}
JavaScript
1
21
21
1
<form method="post">
2
<label>ID</label>
3
<input type="text" name="id" id="idTxt" disabled>
4
5
<label>GOODS</label>
6
<input type="text" name="goods" id="gdTxt" disabled>
7
8
<label>AVAILABLE QTY</label>
9
<input type="text" name="qty" id="qtyTXT" disabled>
10
11
<label>GOODS IN</label>
12
<input type="text" name="gdin" id="gdin" oninput="testmin()">
13
<br>
14
<br>
15
16
<label>Total Goods</label>
17
<input type="text" name="totalgd" id="totalgd" value="0" disabled>
18
<br>
19
20
<input type="submit" name="submit" value="submit">
21
</form>
Advertisement
Answer
Just add type = “number” in the input label for TOTAL GOODS. It should prevent user from entering any alphabet. Except “e”
JavaScript
1
2
1
<input type="number" name="totalgd" id="totalgd" value="0" disabled>
2
As pointed out, if you want to show an alert or something when an input of alphabet is there in TOTAL GOODS, you can just add
JavaScript
1
3
1
<input type="text" name="totalgd" id="totalgd" value="0" oninput = "checkFunction()" disabled>
2
3
and in the function you can check the input for :
JavaScript
1
15
15
1
function checkFunction() {
2
let totalGoodsIn = document.getElementById("totalgd").value;
3
let regExp = /[a-zA-Z]/g;
4
5
if(regExp.test(totalGoodsIn))
6
{
7
//logic if alphabet is present in TOTAL GOODS
8
}
9
else
10
{
11
//logic if alphabet is not present in TOTAL GOODS
12
}
13
14
}
15
if you want GOODS IN to be numeric just change the type of the label accordingly