How to add multiple text boxes of currency using JavaScript when one could be empty?
Question
I am attempting to build a form that only adds boxes together when the input is not empty. Thus far, I can get the form to work when at least two boxes are not empty. However, I can not seem to get the form to work when only one box has a value present.
I have tried adding an additional line to the code as follows:
else if (debit1 != "") {
totalDebit = parseFloat(debit1);
document.getElementById("debitTotal").value = totalDebit.toFixed(2);
}
However, this does not appear to work.
For some detail, I would still consider myself inexperienced with JavaScript, having only used it for form validation in the past. These validations mostly dealt with just required text boxes or drop down boxes so relatively simple things. I realize that a loop may be a better way to go about achieving these results but I am not yet familiar enough with those to attempt on my own.
CSS:
<style>
.Header
{
border: solid black 1px;
background-color: #a9e6fc;
padding: 5px;
text-align: center;
}
table
{
border-collapse: separate;
width: 100%;
border: 1px solid black;
}
table.ex1
{
table-layout: auto;
}
.actionButtons
{
border: solid black 1px;
padding: 5px;
overflow: auto;
background-color: #ff5b5b;
}
.submitButton
{
font-size: 16px;
float: left;
}
.cancelButton
{
font-size: 16px;
float: right;
}
</style>
HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>GL Ticket</title>
</head>
<body>
<form name="myForm" method="post">
<table>
<tr>
<td>Account:</td><td>DEBIT</td><td>CREDIT</td><td>T/C</td><td>DATE</td><td>CHECK #</td><td>SPECIFIC G/L DESCRIPTION</td>
</tr>
<td><input type="text" id="OBKey__51_1" name="OBKey__51_1" size="15" maxlength="10"></td>
<td><input type="text" id="debit1" name="debit1" size="15" maxlength="10"></td>
<td></td>
<td><input type="text" size="5" maxlength="3"></td>
<td><input type="text" size="15" maxlength="10"></td>
<td><input type="text" size="10" maxlength="8"></td>
<td><input type="text" size="60" maxlength="40"></td>
<tr>
<td><input type="text" id="OBKey__51_2" name="OBKey__51_2" size="15" maxlength="10"></td>
<td></td>
<td><input type="text" id="credit1" name="credit1" size="15" maxlength="10"></td>
<td><input type="text" size="5" maxlength="3"></td>
<td><input type="text" size="15" maxlength="10"></td>
<td><input type="text" size="10" maxlength="8"></td>
<td><input type="text" size="60" maxlength="40"></td>
</tr>
<tr>
<td><input type="text" id="OBKey__51_3" name="OBKey__51_3" size="15" maxlength="10"></td>
<td><input type="text" id="debit2" name="debit2" size="15" maxlength="10" onblur="calculateDebits()"></td>
<td></td>
<td><input type="text" size="5" maxlength="3"></td>
<td><input type="text" size="15" maxlength="10"></td>
<td><input type="text" size="10" maxlength="8"></td>
<td><input type="text" size="60" maxlength="40"></td>
</tr>
<tr>
<td><input type="text" id="OBKey__51_4" name="OBKey__51_4" size="15" maxlength="10"></td>
<td></td>
<td><input type="text" id="credit2" name="credit2" size="15" maxlength="10" onblur="calculateCredits()"></td>
<td><input type="text" size="5" maxlength="3"></td>
<td><input type="text" size="15" maxlength="10"></td>
<td><input type="text" size="10" maxlength="8"></td>
<td><input type="text" size="60" maxlength="40"></td>
</tr>
<tr>
<td><input type="text" id="OBKey__51_5" name="OBKey__51_5" size="15" maxlength="10"></td>
<td><input type="text" id="debit3" name="debit3" size="15" maxlength="10" onblur="calculateDebits()"></td>
<td></td>
<td><input type="text" size="5" maxlength="3"></td>
<td><input type="text" size="15" maxlength="10"></td>
<td><input type="text" size="10" maxlength="8"></td>
<td><input type="text" size="60" maxlength="40"></td>
</tr>
<tr>
<td><input type="text" id="OBKey__51_6" name="OBKey__51_6" size="15" maxlength="10"></td>
<td></td>
<td><input type="text" id="credit3" name="credit3" size="15" maxlength="10" onblur="calculateCredits()"></td>
<td><input type="text" size="5" maxlength="3"></td>
<td><input type="text" size="15" maxlength="10"></td>
<td><input type="text" size="10" maxlength="8"></td>
<td><input type="text" size="60" maxlength="40"></td>
<td></td>
</tr>
<tr>
<td><input type="text" id="OBKey__51_7" name="OBKey__51_7" size="15" maxlength="10"></td>
<td><input type="text" id="debit4" name="debit4" size="15" maxlength="10" onblur="calculateDebits()"></td>
<td></td>
<td><input type="text" size="5" maxlength="3"></td>
<td><input type="text" size="15" maxlength="10"></td>
<td><input type="text" size="10" maxlength="8"></td>
<td><input type="text" size="60" maxlength="40"></td>
</tr>
<tr>
<td><input type="text" id="OBKey__51_8" name="OBKey__51_8" size="15" maxlength="10"></td>
<td></td>
<td><input type="text" id="credit4" name="credit4" size="15" maxlength="10" onblur="calculateCredits()"></td>
<td><input type="text" size="5" maxlength="3"></td>
<td><input type="text" size="15" maxlength="10"></td>
<td><input type="text" size="10" maxlength="8"></td>
<td><input type="text" size="60" maxlength="40"></td>
</tr>
<tr>
<td></td>
<td><input type="text" id="debitTotal" name="debitTotal"></td>
<td><input type="text" id="creditTotal" name="creditTotal"></td>
</tr>
</table>
<div class="actionButtons">
<input type="submit" class="submitButton" value="Save" name="OBBtn_Yes" onclick="return validateForm()">
<input type="reset" class="cancelButton" value="Reset" name="OBBtn_Reset">
</div>
</form>
</body>
</html>
JavaScript:
<script>
function validateForm()
{
var a = document.forms["myForm"]["debitTotal"].value;
var b = document.forms["myForm"]["creditTotal"].value;
if (a != b) {alert("NO MATCH.");
return false;
}
}
calculateDebits = function()
{
var debit1 = document.getElementById("debit1").value;
var debit2 = document.getElementById("debit2").value;
var debit3 = document.getElementById("debit3").value;
var debit4 = document.getElementById("debit4").value;
var totalDebit;
if (debit4 != "" && debit3 != "" && debit2 != "" && debit1 != "") {
totalDebit = parseFloat(debit4) + parseFloat(debit3) + parseFloat(debit2) + parseFloat(debit1);
document.getElementById("debitTotal").value = totalDebit.toFixed(2);
}
else if (debit3 != "" && debit2 != "" && debit1 != "") {
totalDebit = parseFloat(debit3) + parseFloat(debit2) + parseFloat(debit1);
document.getElementById("debitTotal").value = totalDebit.toFixed(2);
}
else if (debit2 != "" && debit1 != "") {
totalDebit = parseFloat(debit2) + parseFloat(debit1);
document.getElementById("debitTotal").value = totalDebit.toFixed(2);
}
}
calculateCredits = function()
{
var credit1 = document.getElementById("credit1").value;
var credit2 = document.getElementById("credit2").value;
var credit3 = document.getElementById("credit3").value;
var credit4 = document.getElementById("credit4").value;
var totalCredit;
if (credit4 != "" && credit3 != "" && credit2 != "" && credit1 != "") {
totalCredit = parseFloat(credit4) + parseFloat(credit3) + parseFloat(credit2) + parseFloat(credit1);
document.getElementById("creditTotal").value = totalCredit.toFixed(2);
}
else if (credit3 != "" && credit2 != "" && credit1 != "") {
totalCredit = parseFloat(credit3) + parseFloat(credit2) + parseFloat(credit1);
document.getElementById("creditTotal").value = totalCredit.toFixed(2);
}
else if (credit2 != "" && credit1 != "") {
totalCredit = parseFloat(credit2) + parseFloat(credit1);
document.getElementById("creditTotal").value = totalCredit.toFixed(2);
}
}
</script>
The result I would like to achieve is having these boxes always add and place a value in the debitTotal and creditTotal spots. These values will always be United States currency as well if that is helpful to know. I know it would likely be beneficial to have a way to check that a decimal exists from the third to last position of the debit and credit elements.
Thank you in advance for any assistance or conceptual understanding I get out of asking this question.
1 answers
solution1
0 2019-04-29 17:27:10
This sounds like you're looking for something like "sum" in excel. First, give every element you want to sum a property that signals that. For eg give your debits the class debit.
<td><input type="text" id="debit1" class="debit" name="debit1" size="15" maxlength="10"></td>
Now you can select them all using querySelectorAll:
let debits = document.querySelectorAll(".debit")
and loop through it (read about it, you will need it over and over again).
let debitValue = 0;
for (var debit in debits) {
if (debits.hasOwnProperty(debit) && debits[debit].value > 0) {
debitValue += debits[debit].value;
}
}
document.getElementById("debitTotal").value = debitValue;
Not tested but that should help you.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to empty text boxes when checkbox is unchecked using javascript
Javascript how to copy multiple text boxes into one text box
How to add text boxes dynamically when one text box is filled?
How to have a javascript character counter add multiple text boxes' totals
How do I add text boxes and buttons into a table using Javascript?
Adding multiple text boxes in html using javascript
How can I add multiple text boxes to replace text on the page
Javascript - How to add results of two text boxes and display the result in a third?
How to add to subtract prices using Javascript when user check/unchecks boxes?
add and remove boxes using javascript
Related Tags