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> |
Christian J |
Mar 3 2024, 01:11 PM
Post
#2
|
. Group: WDG Moderators Posts: 9,722 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> |
chunu |
Mar 3 2024, 11:05 PM
Post
#3
|
Newbie Group: Members Posts: 10 Joined: 10-February 23 Member No.: 28,798 |
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
Post
#4
|
. Group: WDG Moderators Posts: 9,722 Joined: 10-August 06 Member No.: 7 |
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
Post
#5
|
Newbie Group: Members Posts: 10 Joined: 10-February 23 Member No.: 28,798 |
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 |
Lo-Fi Version | Time is now: 26th September 2024 - 05:54 AM |