Save data in same html page |
Save data in same html page |
chunu |
Mar 3 2024, 08:44 AM
Post
#1
|
Newbie Group: Members Posts: 10 Joined: 10-February 23 Member No.: 28,798 |
Hi,
I want to add save button to my code, and when i click save i want to save invoice data as summary in table below save button. With every new invoice data of new invoice comes in new row. When i click clear button summary table data should remain there. Thanks CODE <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Invoice</title> </head> <body> <h1>Invoice</h1> <label for="customerName">Customer Name:</label><br> <input type="text" id="customerName" value="John Doe"><br> <label for="receivedQty">Received Quantity (kg):</label><br> <input type="number" id="receivedQty" value="40"><br> <label for="unitPrice">Unit Price:</label><br> <input type="number" id="unitPrice" step="0.01" value="3.00"><br> <label for="deductQty">Deduct Quantity (kg):</label><br> <input type="number" id="deductQty" value="3"><br> <label for="returnedQty">Returned Quantity (kg):</label><br> <input type="number" id="returnedQty" readonly> <label for="total">Total:</label><br> <input type="number" id="total" readonly> <button onclick="clearInputs()">Clear</button> <script> function calculateTotal() { var receivedQty = parseFloat(document.getElementById("receivedQty").value); var unitPrice = parseFloat(document.getElementById("unitPrice").value); var deductQty = parseFloat(document.getElementById("deductQty").value); if (isNaN(receivedQty) || isNaN(unitPrice) || isNaN(deductQty)) { document.getElementById("total").value = ""; document.getElementById("returnedQty").value = ""; return; } var returnedQty = receivedQty - deductQty; var total = returnedQty * unitPrice; document.getElementById("total").value = total.toFixed(2); document.getElementById("returnedQty").value = returnedQty.toFixed(2); } function clearInputs() { document.getElementById("customerName").value = ""; document.getElementById("receivedQty").value = ""; document.getElementById("unitPrice").value = ""; document.getElementById("deductQty").value = ""; document.getElementById("total").value = ""; document.getElementById("returnedQty").value = ""; } // Add event listeners to input fields document.getElementById("receivedQty").addEventListener("input", calculateTotal); document.getElementById("unitPrice").addEventListener("input", calculateTotal); document.getElementById("deductQty").addEventListener("input", calculateTotal); // Call the calculateTotal function initially to populate the returnedQty and total fields calculateTotal(); </script> </body> </html> |
Lo-Fi Version | Time is now: 26th September 2024 - 10:23 AM |