The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> Save data in same html page
chunu
post 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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Posts in this topic
chunu   Save data in same html page   Mar 3 2024, 08:44 AM
Christian J   Does this work? Note that the data is not saved wh...   Mar 3 2024, 01:11 PM
chunu   Does this work? Note that the data is not saved w...   Mar 3 2024, 11:05 PM
Christian J   Code is working, i want to add customer name als...   Mar 4 2024, 04:48 AM
chunu   Code is working, i want to add customer name al...   Mar 4 2024, 05:04 AM

« Next Oldest · Client-side Scripting · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Switch to: Standard · Switch to: Linear+ · Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 13th May 2024 - 01:27 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC