Hi @johnsbox
Hope you are doing well and thanks for reaching out.
To achieve the behavior you described, you can use JavaScript to dynamically calculate and display the grand total when data is entered into form fields and hide it when no data is entered. Here's a sample JavaScript code for this purpose
Note: I am not an expert on JavaScript, Please check the code below and see if that helps.
<!DOCTYPE html>
<html>
<head>
<title>Expense Form</title>
</head>
<body>
<form id="expenseForm">
<label for="expense1">Expense 1:</label>
<input type="number" id="expense1" class="expenseInput"><br>
<label for="expense2">Expense 2:</label>
<input type="number" id="expense2" class="expenseInput"><br>
<label for="expense3">Expense 3:</label>
<input type="number" id="expense3" class="expenseInput"><br>
<label for="grandTotal">Grand Total:</label>
<span id="grandTotal"></span><br>
<button type="button" id="calculateButton">Calculate</button>
</form>
<script>
// Get references to form fields and the grand total element
const expenseInputs = document.querySelectorAll('.expenseInput');
const grandTotalElement = document.getElementById('grandTotal');
const calculateButton = document.getElementById('calculateButton');
// Add a click event listener to the Calculate button
calculateButton.addEventListener('click', calculateGrandTotal);
function calculateGrandTotal() {
let total = 0;
// Calculate the total by summing the values of filled input fields
expenseInputs.forEach(input => {
if (input.value) {
total += parseFloat(input.value);
}
});
// Display the grand total if it's greater than zero, hide it otherwise
if (total > 0) {
grandTotalElement.textContent = total;
} else {
grandTotalElement.textContent = '';
}
}
// Initially, hide the grand total
calculateGrandTotal();
</script>
</body>
</html>
This code creates an expense form with three input fields for expenses, a grand total field, and a Calculate button. When you click the Calculate button, it sums the values of the filled input fields and displays the grand total. If the grand total is zero or no data is entered, it hides the grand total.
~Amal
Regards
Amal
4
Replies
AdChoices
