I’m writing a simple inventory webpage with items used/issued to get subtracted from total stock and the should be in multiples of 50, All working fine except a small glitch.
The Javascript isn’t giving me balance, its adding the items fine in total variable, calculating and showing if its multiple of 50 or not. All Good.
BUT
just not giving me balance. What has gone wrong? I checked many time but to me all seems fine and in place. Help Please.
function findTotal() {
var stock = document.getElementsByName('stock');
var arr = document.querySelectorAll('[name="vala"], [name="valb"], [name="valc"]'); //manual selection of names
var tot = 0;
for (var i = 0; i < arr.length; i++) {
if (parseInt(arr[i].value))
tot += parseInt(arr[i].value);
}
document.getElementById('total').value = tot;
if ((tot % 50) == 0) {
document.getElementById('new').value = "correct";
} else {
document.getElementById('new').value = "incorrect";
}
return tot;
var bal = number(stock - tot);
document.getElementById('balance').value = bal;
return bal;
}
function ValidateTotal() {
var y = findTotal();
if ((y % 50) == 0) {
return true;
} else {
alert("Total Must be in multiples of 50");
return false;
}
}<form class="contact100-form validate-form" onsubmit="return ValidateTotal(this)" method="post" action="portal.php" class="simple-form">
<span class="contact100-form-title">
Portal <br><span style="color:red;"><span style="font-size: 80%"> Data Submission for '.$datadate.' </red>
</span></span>
</span>
</div>
<div class="wrap-input100 validate-input" data-validate="Value 1">
<input class="input100" onblur="findTotal()" type="number" step="1" name="vala" id="vala" placeholder="Value A">
</div>
<div class="wrap-input100 validate-input" data-validate="Value 2">
<input class="input100" onblur="findTotal()" type="number" step="1" name="valb" id="valb" placeholder="Value B">
</div>
<div class="wrap-input100 validate-input" data-validate="Value 3">
<input class="input100" onblur="findTotal()" type="number" step="1" name="valc" id="valc" placeholder="Value C">
</div>
<div class="wrap-input100 validate-input" data-validate="Value 4">
<input class="input100" type="number" step="1" name="vald" id="vald" placeholder="Value D not in total">
</div>
<div class="wrap-input100 validate-input" data-validate="Total">
<input class="input100" type="number" step="1" name="total" id="total" placeholder="Total ABC">
</div>
<div class="wrap-input100 validate-input" data-validate="stock">
<input class="input100" onblur="findTotal()" type="number" step="1" name="stock" id="stock" placeholder="Total Stock">
</div>
<div class="wrap-input100 validate-input" data-validate="balance">
<input class="input100" onblur="findTotal()" type="number" step="1" name="balance" id="balance" placeholder="balance">
</div>
<span style="color:red;">Total :
<input type="text" name="total" id="total" size="2" readonly="readonly">Validations :
<input type="text" name="new" id="new" size="5" readonly="readonly"></span></span>
</div>
<div class="container-contact100-form-btn">
<button class="contact100-form-btn">
Submit
</button>
</div>
</form>
</div>
</div>
</div>>Solution :
you cant use getElementsByName because with getElementsByName it gives you nodelist.in that case you have specify the index:
getElementsByName("stock")[0].
i changed it to document.getElementById('stock').value; getting the value straight from here so you woulnt need to parseInt or .valueAsNumber.
var bal = stock - tot; this will work fine
function findTotal() {
var stock = document.getElementById('stock').value;/*<-------byId*/
var arr = document.querySelectorAll('[name="vala"], [name="valb"], [name="valc"]'); //manual selection of names
var tot = 0;
for (var i = 0; i < arr.length; i++) {
if (parseInt(arr[i].value))
tot += parseInt(arr[i].value);
}
document.getElementById('total').value = tot;
if ((tot % 50) == 0) {
document.getElementById('new').value = "correct";
} else {
document.getElementById('new').value = "incorrect";
}
var bal = stock - tot;
document.getElementById('balance').value = bal;
return bal;
return tot;
}
function ValidateTotal() {
var y = findTotal();
if ((y % 50) == 0) {
return true;
} else {
alert("Total Must be in multiples of 50");
return false;
}
}<form class="contact100-form validate-form" onsubmit="return ValidateTotal(this)" method="post" action="portal.php" class="simple-form">
<span class="contact100-form-title">
Portal <br><span style="color:red;"><span style="font-size: 80%"> Data Submission for '.$datadate.' </red>
</span></span>
</span>
</div>
<div class="wrap-input100 validate-input" data-validate="Value 1">
<input class="input100" onblur="findTotal()" type="number" step="1" name="vala" id="vala" placeholder="Value A">
</div>
<div class="wrap-input100 validate-input" data-validate="Value 2">
<input class="input100" onblur="findTotal()" type="number" step="1" name="valb" id="valb" placeholder="Value B">
</div>
<div class="wrap-input100 validate-input" data-validate="Value 3">
<input class="input100" onblur="findTotal()" type="number" step="1" name="valc" id="valc" placeholder="Value C">
</div>
<div class="wrap-input100 validate-input" data-validate="Value 4">
<input class="input100" type="number" step="1" name="vald" id="vald" placeholder="Value D not in total">
</div>
<div class="wrap-input100 validate-input" data-validate="Total">
<input class="input100" type="number" step="1" name="total" id="total" placeholder="Total ABC">
</div>
<div class="wrap-input100 validate-input" data-validate="stock">
<input class="input100" onblur="findTotal()" type="number" step="1" name="stock" id="stock" placeholder="Total Stock">
</div>
<div class="wrap-input100 validate-input" data-validate="balance">
<input class="input100" onblur="findTotal()" type="number" step="1" name="balance" id="balance" placeholder="balance">
</div>
<span style="color:red;">Total :
<input type="text" name="total" id="total" size="2" readonly="readonly">Validations :
<input type="text" name="new" id="new" size="5" readonly="readonly"></span></span>
</div>
<div class="container-contact100-form-btn">
<button class="contact100-form-btn">
Submit
</button>
</div>
</form>
</div>
</div>
</div>