HTMLHelp Forums > Save data in same html page

chunu

Mar 3 2024, 08:44 AM

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>

Christian J

Mar 3 2024, 01: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>

chunu

Mar 3 2024, 11:05 PM

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.

Christian J

Mar 4 2024, 04:48 AM

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.

chunu

Mar 4 2024, 05:04 AM

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