Posted by: 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>
Posted by: 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>
Posted by: 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.
Posted by: 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.
Posted by: 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