The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> 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
Christian J
post Mar 3 2024, 01:11 PM
Post #2


.
********

Group: WDG Moderators
Posts: 9,661
Joined: 10-August 06
Member No.: 7
Does this work? Note that the data is not saved when the user leaves the page, also it's not accessible in any other user's browser.

CODE
<button onclick="createSummary()">Create Summary</button>

<table id="summary">
<tr>
<th>Returned Quantity (kg)</th>
<th>Total</th>
</tr>
</table>

<script>
function createSummary()
{
    var summary_table=document.getElementById('summary');

    var tr=document.createElement("tr");

    var quantity_cell=document.createElement("td");
    var quantity_field=document.createElement("input");
    quantity_field.setAttribute("readyonly", "readonly");
    quantity_field.value=document.getElementById('returnedQty').value;

    var total_cell=document.createElement("td");
    var total_field=document.createElement("input");
    total_field.setAttribute("readyonly", "readonly");
    total_field.value=document.getElementById('total').value;

    quantity_cell.appendChild(quantity_field);
    total_cell.appendChild(total_field);

    tr.appendChild(quantity_cell);
    tr.appendChild(total_cell);

    summary_table.appendChild(tr);
}
</script>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
chunu
post Mar 3 2024, 11:05 PM
Post #3


Newbie
*

Group: Members
Posts: 10
Joined: 10-February 23
Member No.: 28,798
QUOTE(Christian J @ Mar 3 2024, 11:11 PM) *

Does this work? Note that the data is not saved when the user leaves the page, also it's not accessible in any other user's browser.

CODE
<button onclick="createSummary()">Create Summary</button>

<table id="summary">
<tr>
<th>Returned Quantity (kg)</th>
<th>Total</th>
</tr>
</table>

<script>
function createSummary()
{
    var summary_table=document.getElementById('summary');

    var tr=document.createElement("tr");

    var quantity_cell=document.createElement("td");
    var quantity_field=document.createElement("input");
    quantity_field.setAttribute("readyonly", "readonly");
    quantity_field.value=document.getElementById('returnedQty').value;

    var total_cell=document.createElement("td");
    var total_field=document.createElement("input");
    total_field.setAttribute("readyonly", "readonly");
    total_field.value=document.getElementById('total').value;

    quantity_cell.appendChild(quantity_field);
    total_cell.appendChild(total_field);

    tr.appendChild(quantity_cell);
    tr.appendChild(total_cell);

    summary_table.appendChild(tr);
}
</script>



Thanks Christian J
Code is working, i want to add customer name also in summary. Is there any way to save summary data , example csv or excel etc.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 4 2024, 04:48 AM
Post #4


.
********

Group: WDG Moderators
Posts: 9,661
Joined: 10-August 06
Member No.: 7
QUOTE(chunu @ Mar 4 2024, 05:05 AM) *

Code is working, i want to add customer name also in summary.

You can just use similar code as the other fields:

CODE
<table id="summary">
<tr>
<th>Customer Name</th>
<th>Returned Quantity (kg)</th>
<th>Total</th>
</tr>
</table>

var customer_cell=document.createElement("td");
var customer_field=document.createElement("input");
customer_field.setAttribute("readyonly", "readonly");
customer_field.value=document.getElementById('customerName').value;

customer_cell.appendChild(customer_field);
tr.appendChild(customer_cell);


QUOTE
Is there any way to save summary data , example csv or excel etc.

Not with javascript alone, as far as I know. You'd have to run the page on a server and submit form data to a server-side script (say PHP), which can save the data to other file formats.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
chunu
post Mar 4 2024, 05:04 AM
Post #5


Newbie
*

Group: Members
Posts: 10
Joined: 10-February 23
Member No.: 28,798
QUOTE(Christian J @ Mar 4 2024, 02:48 PM) *

QUOTE(chunu @ Mar 4 2024, 05:05 AM) *

Code is working, i want to add customer name also in summary.

You can just use similar code as the other fields:

CODE
<table id="summary">
<tr>
<th>Customer Name</th>
<th>Returned Quantity (kg)</th>
<th>Total</th>
</tr>
</table>

var customer_cell=document.createElement("td");
var customer_field=document.createElement("input");
customer_field.setAttribute("readyonly", "readonly");
customer_field.value=document.getElementById('customerName').value;

customer_cell.appendChild(customer_field);
tr.appendChild(customer_cell);


QUOTE
Is there any way to save summary data , example csv or excel etc.

Not with javascript alone, as far as I know. You'd have to run the page on a server and submit form data to a server-side script (say PHP), which can save the data to other file formats.

Thank you so much for your time and help
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Client-side Scripting · Next Newest »
 

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

 

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

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

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