After user fill up the data and click "Generate Report" for the confirmation .
Once user click the Generate Report button and it's display confirmation page. The issue is , it's only display the quantity data that insert by user. Now i want to display "Pre Price" , " Quantity " , " Item Price "
I'm tried to insert multiple variable on foreach statement so that I can view all the data insert by user. How to solve it?
<html>
<body>
<table>
<!-- Table Header -->
<form action="extra.php" method="post">
<thead>
<tr>
<td><span class="icon icon-tag"></span> Item</td>
<td><span class="icon icon-layers"></span> Surface</td>
<td><span class="icon icon-tag"></span> Unit Price</td>
<td><span class="icon icon-cursor-move"></span> Quantity</td>
<td><span class="icon icon-basket"></span> Item Price</td>
</tr>
</thead>
<!-- End of Table Header -->
<!-- Table Body -->
<tbody>
<tr>
<td><strong>Wardrobes</strong></td>
<td>
<div class="btn-group"></div>
</td>
<td></td>
<td></td>
<td></td>
</tr>
<script>
function getTotal() {
var total = 0;
for (var i = 0, n = document.querySelectorAll(".tr-item").length; i < n; i++) {
var price = document.getElementById('unitprice_' + i).value;
var quantity = document.getElementById('quantity_' + i).value;
var subtotal = price * quantity;
document.getElementById('subtotal_' + i).value = subtotal.toFixed(2);
total += subtotal;
}
document.getElementById("total").value = total.toFixed(2);
}
window.onload = function() {
for (var i = 0, n = document.querySelectorAll(".tr-item").length; i < n; i++) {
document.getElementById('quantity_' + i).onkeyup = getTotal;
}
getTotal();
}
</script>
<tr class="tr-item">
<td>Full height Wardrobe (Swing door)</td>
<td>
<script>
function myFunction1(btn1) {
document.getElementById("unitprice_0").value = btn1;
}
</script>
<div class="btn-group surface-options-group">
<button type="button" name="btn1" onclick="myFunction1(this.value)" value="360">Laminates</button>
<button type="button" name="btn1" onclick="myFunction1(this.value)" value="240">Veneer</button>
</div>
</td>
<td>SGD$<input type="text" name="unitprice" id="unitprice_0" value="360" size="1" readonly></td>
</td>
<td>
<input type="number" name="quantity[Full height Wardrobe (Swing door)]" id="quantity_0" min="0" max="10000" value="0">
<span class="quantity-unit">ft.</span>
</td>
<td><input type="text" name="subtotal" id="subtotal_0" size="5" maxlength="9" value="0" readonly/> </td>
</tr>
<tr id="tr-item-2" class="tr-item">
<td>Full height Wardrobe (Normal sliding door)</td>
<td>
<div class="btn-group surface-options-group">
<button type="button" name="btn2" onclick="myFunction2(this.value)" value="360">Laminates</button>
<button type="button" name="btn2" onclick="myFunction2(this.value)" value="240">Veneer</button>
</div>
<script>
function myFunction2(btn2) {
document.getElementById("unitprice_1").value = btn2;
}
</script>
</td>
<td>SGD$<input type="text" name="unitprice" id="unitprice_1" value="360" size="1" readonly></td>
</td>
<td>
<input type="number" name="quantity[Full height Wardrobe (Normal sliding door)]" id="quantity_1" min="0" max="10000" value="0">
<span class="quantity-unit">ft. SGD$</span>
</td>
<td><input type="text" name="subtotal" id="subtotal_1" size="5" maxlength="9" value="0.00" readonly/> </td>
</tr>
<tr class="tr-item">
<td>Full height Open Wardrobe</td>
<td>
<div class="btn-group surface-options-group">
<button type="button" name="btn3" onclick="myFunction3(this.value)" value="200">Polyken</button>
<button type="button" name="btn3" onclick="myFunction3(this.value)" value="330">Veneer</button>
</div>
<script>
function myFunction3(btn3) {
document.getElementById("unitprice_2").value = btn3;
}
</script>
</td>
<td>SGD$<input type="text" name="unitprice" id="unitprice_2" value="200" size="1" readonly></td>
</td>
<td>
<input type="number" name="quantity[Full height Open Wardrobe]" id="quantity_2" min="0" max="10000" value="0">
<span class="quantity-unit">ft. SGD$</span>
</td>
<td><input type="text" name="subtotal_2" id="subtotal_2" size="5" maxlength="9" value="0.00" readonly/> </td>
</tr>
</table>
<br>
<br>
<center><button type="submit" name="btUpdate">Generate Report</button></center>
</div>
<div id="pricing-total">
<h3><span class="icon icon-calculator"></span> Total Price</h3>
<p>SGD$<input type="text" id="total" value="0" /></p>
</div>
</form>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Confirmation Page</title>
</head>
<body>
<?php
//Get the input.
if (isset($_POST['btUpdate'])) {
$stockData = $_POST['quantity'];
}
?>
<p> Confirmation.</p>
<table width="559" border="1" cellpadding="5" cellspacing="0">
<tr>
<th width="407">Product</th>
<th width="126">Per Price</th>
<th width="126">Quantity</th>
<th width="126">Iteam Price</th>
</tr>
<?php
$stock_total = 0;
foreach ($stockData as $key => $value) {
?>
<?php
$stock_total = $stock_total + $value;
if (!empty($value)) {
?>
<tr>
<td><?php echo $key; ?></td>
<td></td>
<td><?php echo $value; ?></td>
<td></td>
</tr>
<?php }
} ?>
<tr>
<td >Total Items</td>
<td width="126"><?php print $stock_total; ?></td>
</tr>
</table>
</body>
</html>
I created arrays for all the inputs, i.e. for product, unitprice, quantity and subtotal. And onclick of the buttons, changed the unit price along with product name in the form hidden input for the product. Also recalculated subtotal and total.
<html>
<body>
<form action="extra.php" method="post">
<table>
<!-- Table Header -->
<thead>
<tr>
<td><span class="icon icon-tag"></span> Item</td>
<td><span class="icon icon-layers"></span> Surface</td>
<td><span class="icon icon-tag"></span> Unit Price</td>
<td><span class="icon icon-cursor-move"></span> Quantity</td>
<td><span class="icon icon-basket"></span> Item Price</td>
</tr>
</thead>
<!-- End of Table Header -->
<!-- Table Body -->
<tbody>
<tr>
<td><strong>Wardrobes</strong></td>
<td>
<div class="btn-group"></div>
</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="tr-item">
<td>Full height Wardrobe (Swing door)</td>
<td>
<script>
function myFunction1(btn1) {
document.getElementById("unitprice_0").value = btn1;
document.getElementById("product_0").value = "Full height Wardrobe (Swing door) - " + btn1.textContent;
document.getElementById("unitprice_0").value = btn1.value;
}
</script>
<div class="btn-group surface-options-group">
<button type="button" name="btn1" onclick="myFunction1(this);getTotal();" value="360">Laminates</button>
<button type="button" name="btn1" onclick="myFunction1(this);getTotal();" value="240">Veneer</button>
</div>
<input type="hidden" name="product[]" value="Full height Wardrobe (Swing door) - Laminates" id="product_0" />
</td>
<td>SGD$<input type="text" name="unitprice[]" id="unitprice_0" value="360" size="1" readonly></td>
</td>
<td>
<input type="number" name="quantity[]" id="quantity_0" min="0" max="10000" value="0">
<span class="quantity-unit">ft.</span>
</td>
<td><input type="text" name="subtotal[]" id="subtotal_0" size="5" maxlength="9" value="0" readonly/> </td>
</tr>
<tr id="tr-item-2" class="tr-item">
<td>Full height Wardrobe (Normal sliding door)</td>
<td>
<div class="btn-group surface-options-group">
<button type="button" name="btn2" onclick="myFunction2(this);getTotal();" value="360">Laminates</button>
<button type="button" name="btn2" onclick="myFunction2(this);getTotal();" value="240">Veneer</button>
</div>
<input type="hidden" name="product[]" value="Full height Wardrobe (Normal sliding door) - Laminates" id="product_1" />
<script>
function myFunction2(btn2) {
document.getElementById("product_1").value = "Full height Wardrobe (Normal sliding door) - " + btn2.textContent;
document.getElementById("unitprice_1").value = btn2.value;
}
</script>
</td>
<td>SGD$<input type="text" name="unitprice[]" id="unitprice_1" value="360" size="1" readonly></td>
</td>
<td>
<input type="number" name="quantity[]" id="quantity_1" min="0" max="10000" value="0">
<span class="quantity-unit">ft. SGD$</span>
</td>
<td><input type="text" name="subtotal[]" id="subtotal_1" size="5" maxlength="9" value="0.00" readonly/> </td>
</tr>
<tr class="tr-item">
<td>Full height Open Wardrobe</td>
<td>
<div class="btn-group surface-options-group">
<button type="button" name="btn3" onclick="myFunction3(this);getTotal();" value="200">Polyken</button>
<button type="button" name="btn3" onclick="myFunction3(this);getTotal();" value="330">Veneer</button>
</div>
<input type="hidden" name="product[]" value="Full height Open Wardrobe - Polyken" id="product_2" />
<script>
function myFunction3(btn3) {
document.getElementById("product_2").value = "Full height Open Wardrobe - " + btn3.textContent;
document.getElementById("unitprice_2").value = btn3.value;
}
</script>
</td>
<td>SGD$<input type="text" name="unitprice[]" id="unitprice_2" value="200" size="1" readonly></td>
</td>
<td>
<input type="number" name="quantity[]" id="quantity_2" min="0" max="10000" value="0">
<span class="quantity-unit">ft. SGD$</span>
</td>
<td><input type="text" name="subtotal[]" id="subtotal_2" size="5" maxlength="9" value="0.00" readonly/> </td>
</tr>
</table>
<br>
<br>
<center><button type="submit" name="btUpdate">Generate Report</button></center>
</div>
<div id="pricing-total">
<h3><span class="icon icon-calculator"></span> Total Price</h3>
<p>SGD$<input type="text" name="grandtotal" id="total" value="0" readonly /></p>
</div>
</form>
<!-- <script type="text/javascript" src="js/script.js"></script>-->
<script>
function getTotal() {
var total = 0;
for (var i = 0, n = document.querySelectorAll(".tr-item").length; i < n; i++) {
var price = document.getElementById('unitprice_' + i).value;
var quantity = document.getElementById('quantity_' + i).value;
var subtotal = price * quantity;
console.log(price + " " + quantity);
document.getElementById('subtotal_' + i).value = subtotal.toFixed(2);
total += subtotal;
}
document.getElementById("total").value = total.toFixed(2);
}
window.onload = function() {
for (var i = 0, n = document.querySelectorAll(".tr-item").length; i < n; i++) {
document.getElementById('quantity_' + i).onchange = getTotal;
}
getTotal();
};
</script>
</body>
</html>
extra.php
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Confirmation Page</title>
</head>
<body>
<p> Confirmation.</p>
<table width="559" border="1" cellpadding="5" cellspacing="0">
<tr>
<th width="407">Product</th>
<th width="126">Per Price</th>
<th width="126">Quantity</th>
<th width="126">Iteam Price</th>
</tr>
<?php
$i=0;
$total_items = 0;
foreach($_POST["product"] as $key) {
If($_POST["quantity"][$i]!=0) {
echo "<tr>";
echo "<td>".$_POST["product"][$i]."</td>";
echo "<td>".$_POST["unitprice"][$i]."</td>";
echo "<td>".$_POST["quantity"][$i]."</td>";
echo "<td>".$_POST["subtotal"][$i]."</td>";
echo "</tr>";
}
$total_items += $_POST["quantity"][$i];
$i++;
}
?>
<tr>
<td >Total Items</td>
<td colspan="2"><?php echo $total_items; ?></td>
<td>Total - <?php echo $_POST["grandtotal"] ?></td>
</tr>
</table>
</body>
</html>
Related
I want to display the total sum of values shown in the amount input-boxes in the next field named sub total without refreshing page.
JS-code for sum of n numbers:
function Mul(index) {
var quantity = document.getElementsByClassName("quantity")[index].value;
var price = document.getElementsByClassName("price")[index].value;
document.getElementsByClassName("amount")[index].value = quantity * price;
}
<table class="table table-center table-hover" id="myTable">
<thead>
<tr>
<th>Description</th>
<th>Quantity</th>
<th>Unit Price</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control">
</td>
<td>
<input type="number" id="" class=" quantity form-control"
onkeyup="Mul('0') , Add()">
</td>
<td>
<input type="number" id="" class="price form-control"
onkeyup="Mul('0')">
</td>
<td>
<input type="text" id="amount-0" class="amount form-control"
disabled>
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control">
</td>
<td>
<input type="number" id="" class=" quantity form-control"
onkeyup="Mul('1')">
</td>
<td>
<input type="number" id="" class="price form-control"
onkeyup="Mul('1')">
</td>
<td>
<input type="text" id="amount-1" class="amount form-control"
disabled>
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control">
</td>
<td>
<input type="number" id="" class=" quantity form-control"
onkeyup="Mul('2')">
</td>
<td>
<input type="number" id="" class="price form-control"
onkeyup="Mul('2')">
</td>
<td>
<input type="text" id="amount-2" class="amount form-control"
disabled>
</td>
</tr>
</tbody>
</table>
<div class="table-responsive">
<table class="table table-stripped table-center table-hover">
<thead></thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td class="text-end">Sub Total</td>
<td class="text-end">0</td>
</tr>
</tbody>
</table>
</div>
I don't know why, but obviously rare are those who understand that using a form has benefits ...
const myForm = document.forms['my-form']
myForm.oninput = ({target: elm}) => // for any change iside the form
{
let
row = elm.closest('tr')
, Dsc = row.querySelector('input[name^="desc"]')
, Qte = row.querySelector('input[name^="quantity"')
, Prx = row.querySelector('input[name^="price"')
, Amt = row.querySelector('input[name^="amount"')
;
Dsc.required = (Qte.valueAsNumber > 0)
switch (elm.name.split('_')[0]) {
case 'quantity':
case 'price':
Amt.value = Qte.valueAsNumber * Prx.valueAsNumber
myForm.SubTotal.textContent =
[...myForm.querySelectorAll('input[name^="amount"')]
.reduce((sum,el)=>sum + +el.value,0)
break;
}
}
myForm.onsubmit = e =>
{
e.preventDefault() // disable form submiting
let formInputs = Object.fromEntries( new FormData(myForm).entries() )
console.clear()
console.log( formInputs)
}
table {
border-collapse: collapse;
margin : 2em 1em;
}
td, th {
padding : .2em;
border : 1px solid darkblue;
}
input {
width : 6em;
text-align : right;
}
td:first-of-type input {
width : 10em;
text-align : left;
}
<form name="my-form">
<table>
<thead>
<tr> <th>Description</th> <th>Quantity</th> <th>Unit Price</th> <th>Amount</th> </tr>
</thead>
<tbody>
<tr>
<td> <input type="text" name="desc_1" > </td>
<td> <input type="number" name="quantity_1" value="0" min="0"> </td>
<td> <input type="number" name="price_1" value="0" min="0"> </td>
<td> <input type="text" name="amount_1" disabled value="0"></td>
</tr>
<tr>
<td> <input type="text" name="desc_2" > </td>
<td> <input type="number" name="quantity_2" value="0" min="0"> </td>
<td> <input type="number" name="price_2" value="0" min="0"> </td>
<td> <input type="text" name="amount_2" disabled value="0"></td>
</tr>
<tr>
<td> <input type="text" name="desc_3" > </td>
<td> <input type="number" name="quantity_3" value="0" min="0"> </td>
<td> <input type="number" name="price_3" value="0" min="0"> </td>
<td> <input type="text" name="amount_3" disabled value="0"></td>
</tr>
</tbody>
<tfoot>
<td colspan="4"> Sub Total : <output name="SubTotal">0</output> </td>
</tfoot>
</table>
<button type="submit">submit</button>
</form>
You can assign an id to the subtotal cell and change its value on every Mul call.
Something like this :
function Mul(index) {
var quantity = document.getElementsByClassName("quantity")[index].value;
var price = document.getElementsByClassName("price")[index].value;
document.getElementsByClassName("amount")[index].value = quantity * price;
const subTotalField = document.getElementById("subTotal");
subTotalField.innerHTML = parseInt(subTotalField.innerHTML) + quantity * price;
}
<html>
<body>
<table class="table table-center table-hover" id="myTable">
<thead>
<tr>
<th>Description</th>
<th>Quantity</th>
<th>Unit Price</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control">
</td>
<td>
<input type="number" id="" class=" quantity form-control"
onkeyup="Mul('0') , Add()">
</td>
<td>
<input type="number" id="" class="price form-control"
onkeyup="Mul('0')">
</td>
<td>
<input type="text" id="amount-0" class="amount form-control"
disabled>
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control">
</td>
<td>
<input type="number" id="" class=" quantity form-control"
onkeyup="Mul('1')">
</td>
<td>
<input type="number" id="" class="price form-control"
onkeyup="Mul('1')">
</td>
<td>
<input type="text" id="amount-1" class="amount form-control"
disabled>
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control">
</td>
<td>
<input type="number" id="" class=" quantity form-control"
onkeyup="Mul('2')">
</td>
<td>
<input type="number" id="" class="price form-control"
onkeyup="Mul('2')">
</td>
<td>
<input type="text" id="amount-2" class="amount form-control"
disabled>
</td>
</tr>
</tbody>
</table>
<div class="table-responsive">
<table class="table table-stripped table-center table-hover">
<thead></thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td class="text-end">Sub Total</td>
<td id="subTotal" class="text-end">0</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
so for some reason my table comes out wonky and unfinished looking and off place i cant figure out what i did wrong and i am stuck could someone please help me out
problems the script wont let me edit or save anything also random text box next to add row and total is messed up tooenter image description here
<!DOCTYPE html>
<html>
<head>
<script>
function edit_row(no)
{
document.getElementById("edit_button"+no).style.display="none";
document.getElementById("save_button"+no).style.display="block";
var fforder=document.getElementById("fforder_row"+no);
var ffaddress=document.getElementById("ffaddress_row"+no);
var ffstatus=document.getElementById("ffstatus_row"+no);
var ffdate=document.getElementById("ffdate_row"+no);
var fftotal=document.getElementById("fftotal_row"+no);
var fforder_data=fforder.innerHTML;
var ffaddress_data=ffaddress.innerHTML;
var ffstatus_data=ffstatus.innerHTML;
var ffdate_data=ffdate.innerHTML;
var fftotal_data=fftotal.innerHTML;
fforder.innerHTML="<input type='text' id='fforder_text"+no+"' value='"+fforder_data+"'>";
ffaddress.innerHTML="<input type='text' id='ffaddress_text"+no+"' value='"+ffaddress_data+"'>";
ffstatus.innerHTML="<select id='ffstatus_text"+no+"' value='"+ffstatus_data+"'><option value>-select-</option><option value='FF'>Shipped</option><option value='RF'>Delivered</option><option value='PF'>Canceled</option><option value='DF'>Open</option></select>";
ffdate.innerHTML="<input type='date' id='ffdate_text"+no+"' value='"+ffdate_data+"'>";
fftotal.innerHTML="<input type='text' id='fftotal_text"+no+"' value='"+fftotal_data+"'>";
}
function save_row(no)
{
var fforder_val=document.getElementById("fforder_text"+no).value;
var ffaddress_val=document.getElementById("ffaddress_text"+no).value;
var e =document.getElementById("ffstatus_text"+no);
var ffstatus_val=e.options[e.selectedIndex].text;
var ffdate_val=document.getElementById("ffdate_text"+no).value;
var fftotal_val=document.getElementById("fftotal_text"+no).value;
document.getElementById("fforder_row"+no).innerHTML=fforder_val;
document.getElementById("ffaddress_row"+no).innerHTML=ffaddress_val;
document.getElementById("ffstatus_row"+no).innerHTML=ffstatus_val;
document.getElementById("ffdate_row"+no).innerHTML=ffdate_val;
document.getElementById("fftotal_row"+no).innerHTML=fftotal_val;
document.getElementById("edit_button"+no).style.display="block";
document.getElementById("save_button"+no).style.display="none";
}
function delete_row(no)
{
document.getElementById("row"+no+"").outerHTML="";
}
function add_row()
{
var new_fforder=document.getElementById("new_fforder").value;
var new_ffaddress=document.getElementById("new_ffaddress").value;
var new_ffstatus=document.getElementById("new_ffstatus").value;
var new_ffdate=document.getElementById("new_ffdate").value;
var new_fftotal=document.getElementById("new_fftotal").value;
var table=document.getElementById("data_table");
var table_len=(table.rows.length)-1;
var row = table.insertRow(table_len).outerHTML="<tr id='row"+table_len+"'><td id='fforder_row"+table_len+"'>"+new_fforder+"</td><td id='ffaddress_row"+table_len+"'>"+new_ffaddress+"</td><td id='ffstatus_row"+table_len+"'>"+new_ffstatus+"</td><td id='ffdate_row"+table_len+"'>"+new_ffdate+"</td><td id='fftotal_row"+table_len+"'>"+new_fftotal+"</td><td><input type='button' id='edit_button"+table_len+"' value='Edit' class='edit' onclick='edit_row("+table_len+")'> <input type='button' id='save_button"+table_len+"' value='Save' class='save' onclick='save_row("+table_len+")'> <input type='button' value='Delete' class='delete' onclick='delete_row("+table_len+")'></td></tr>";
document.getElementById("new_fforder").value="";
document.getElementById("new_ffaddress").value="";
document.getElementById("new_ffstatus").value="";
document.getElementById("new_ffdate").value="";
document.getElementById("new_fftotal").value="";
}</script>
</head>
<body>
<h2>Orders</h2>
<div id="wrapper">
<table align='center' cellspacing=2 cellpadding=5 id="data_table" border=1>
<tr>
<th>Order Number</th>
<th>Address</th>
<th>Order Status</th>
<th>Date</th>
<th>Total</th>
</tr>
<tr id="row1">
<td id="fforder_row1">#123333</td>
<td id="ffaddress_row1">38923 Trevors Lane</td>
<td id="ffstatus_row1">Shipped</td>
<td id="ffdate_row1">2020-12-21</td>
<td id="fftotal_row1">10.00</td>
<td>
<input type="button" id="edit_button1" value="Edit" class="edit" onclick="edit_row('1')">
<input type="button" id="save_button1" value="Save" class="save" onclick="save_row('1')">
<input type="button" value="Delete" class="delete" onclick="delete_row('1')">
</td>
</tr>
<tr id="row2">
<td id="fforder_row2">#233442</td>
<td id="ffaddress_row2">39002 Joint Ave</td>
<td id="ffstatus_row2">Delivered</td>
<td id="ffdate_row2">2020-12-21</td>
<td id="fftotal_row2">102.00</td>
<td>
<input type="button" id="edit_button2" value="Edit" class="edit" onclick="edit_row('2')">
<input type="button" id="save_button2" value="Save" class="save" onclick="save_row('2')">
<input type="button" value="Delete" class="delete" onclick="delete_row('2')">
</td>
</tr>
<tr id="row3">
<td id="fforder_row3">#990202</td>
<td id="ffaddress_row3">29783 Marc Jobs NE</td>
<td id="ffstatus_row3">Open</td>
<td id="ffdate_row3">2020-12-21</td>
<td id="fftotal_row3">1,020.00</td>
<td>
<input type="button" id="edit_button3" value="Edit" class="edit" onclick="edit_row('3')">
<input type="button" id="save_button3" value="Save" class="save" onclick="save_row('3')">
<input type="button" value="Delete" class="delete" onclick="delete_row('3')">
</td>
</tr>
<tr>
<td><input type="text" id="new_fforder"></td>
<td><input type="text" id="new_ffaddress"></td>
<td>
<select name="ffstatus" id="new_ffstatus">
<option value="">-select-</option>
<option value="FF">Shipped</option>
<option value="RF">Delivered</option>
<option value="PF">Canceled</option>
<option value="DF">Open</option>
</select>
</td>
<td><input type="date" id="new_ffdate"></td>
<td><input type="button" class="add" onclick="add_row();" value="Add Row"></td>
<td><input type="text" id="new_fftotal"></td>
</tr>
</table>
</div>
</body>
</html>
I recommend using the plugin datatable. Because it is flexible and allows basic operations (add, modify, delete rows).
I want to add the column values in text box field of each single row during insertion of value to that field and display that value in a read only field.
HTML CODE:
<form action="" method="post">
<table class="table-responsive">
<thead>
<tr>
<th style="width: 10%;">Task Name</th>
<th style="width: 10%;">Task Code</th>
<th style="width: 10%;">LDR</th>
<th style="width: 10%;">SDR</th>
<th style="width: 30%;">Total</th>
</tr>
</thead>
<?php
while($m_row = $m_result->fetch_assoc()) {
?>
<tbody>
<tr>
<?php
$sqltask="SELECT * FROM tasks WHERE tasks_code='".$m_row['tcode']."'";
$resulttask=$conn->query($sqltask);
$rowtask=$resulttask->fetch_assoc();
?>
<td><?php echo $rowtask['tasks_name'] ?></td>
<td><?php echo $m_row['tcode'] ?></td>
<td>
<input type="text" class="form-control master" name="ldr[]" id="ldr" value="<?php echo $m_row['ldr'];?>" placeholder="" autocomplete="off">
</td>
<td>
<input type="text" class="form-control master" name="sdr[]" id="sdr" value="<?php echo $m_row['sdr'];?>" placeholder="" autocomplete="off">
</td>
<td>
<input type="number" class="form-control master" id="master_diff" name="master_diff[]" readonly />
</td>
<td> <input type="hidden" name="master[]" id="master" value="<?php echo $master_row['id'];?>" /></td></tr>
</tbody>
<?php
}
?>
</table>
<div class="pull-right">
<input type="submit" class="btn btn-primary" name="mastertask" placeholder="Assign"/>
</div>
</div>
</div>
</div>
</form>
The above code is the html code for the textbox fields where the fields ldr,sdr should be sumup for getting the total sum in master_diff field. It should be using onchange event since each entry to the textbox fields should be get added to display the final sum.
You should to remove all ids from the cycle!
Try this:
var inputs = document.getElementsByClassName("inputs");
var summDiff = function() {
var tr = this.closest("tr");
var ldr = tr.getElementsByClassName("ldr")[0]
var sdr = tr.getElementsByClassName("sdr")[0]
var diff = tr.getElementsByClassName("master_diff")[0]
diff.value = parseInt(ldr.value) + parseInt(sdr.value)
};
for (var i = 0; i < inputs.length; i++) {
inputs[i].addEventListener('change', summDiff, false);
}
<form action="" method="post">
<table class="table-responsive">
<thead>
<tr>
<th style="width: 10%;">Task Name</th>
<th style="width: 10%;">Task Code</th>
<th style="width: 10%;">LDR</th>
<th style="width: 10%;">SDR</th>
<th style="width: 30%;">Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>task 1</td>
<td>0001</td>
<td>
<input type="text" class="form-control master ldr inputs" name="ldr[]" value="" placeholder="" autocomplete="off">
</td>
<td>
<input type="text" class="form-control master sdr inputs" name="sdr[]" value="" placeholder="" autocomplete="off">
</td>
<td>
<input type="number" class="form-control master master_diff" name="master_diff[]" readonly />
</td>
<td>
<input type="hidden" name="master[]" value="1" />
</td>
</tr>
<tr>
<td>task 2</td>
<td>0002</td>
<td>
<input type="text" class="form-control master ldr inputs" name="ldr[]" value="" placeholder="" autocomplete="off">
</td>
<td>
<input type="text" class="form-control master sdr inputs" name="sdr[]" value="" placeholder="" autocomplete="off">
</td>
<td>
<input type="number" class="form-control master master_diff" name="master_diff[]" readonly />
</td>
<td>
<input type="hidden" name="master[]" value="2" />
</td>
</tr>
<tr>
<td>task 3</td>
<td>0003</td>
<td>
<input type="text" class="form-control master ldr inputs" name="ldr[]" value="" placeholder="" autocomplete="off">
</td>
<td>
<input type="text" class="form-control master sdr inputs" name="sdr[]" value="" placeholder="" autocomplete="off">
</td>
<td>
<input type="number" class="form-control master master_diff" name="master_diff[]" readonly />
</td>
<td>
<input type="hidden" name="master[]" value="3" />
</td>
</tr>
</tbody>
</table>
<div class="pull-right">
<input type="submit" class="btn btn-primary" name="mastertask" placeholder="Assign"/>
</div>
</form>
I am trying to create a custom wordpress template for products. For which I need to update the Total quantity when 2 sub-quantity is increased or decreased. Also the value of total quantity will be multiplied with price.
Let's say:
sub-quantity-1 value = 2 and sub-quantity-2 value = 3,
So Total quantity value = 5 and price is 5 x $100 = $500
The problem is I am generating this input fields using wordpress loop, so all the inputs have same class & name.
Lets say: I am increasing sub-quantity for PRODUCT 1 which increases all Total Quantity for PRODUCT 1 to PRODUCT 100
PHP CODE:
<?php $wp_query = new WP_Query( array(
'post_type' => 'product',
'post__in' => array( 481, 478, 934, 178 ),
'posts_per_page' => 15,
'offset' => 0,
'orderby' => '',
'order' => 'ASC' ) );
?>
<?php if ( $wp_query->have_posts() ) : while ( $wp_query->have_posts() ) : $wp_querys->the_post();
global $product;
$product = get_product( get_the_ID() );
?>
<table>
<thead>
<tr>
<th>Price</th>
<th>Quantity</th>
<th>Total Quantity</th>
<th>Button</th>
</tr>
</thead>
<tbody class="products-container">
<tr class="product-<?php echo esc_attr( $product->id ); ?>">
<form action="<?php echo esc_url( $product->add_to_cart_url() ); ?>" class="cart" method="post" enctype='multipart/form-data'>
<td class="price">
<span class="woocommerce-Price-amount amount">
<span class="woocommerce-Price-currencySymbol">
<?php echo get_woocommerce_currency_symbol(); ?>
</span>
<?php echo $product->get_price() ?>
</span>
</td>
<td class="quantity">
<table>
<tr>
<?php echo qty-sz(); ?>
</tr>
<tr>
<?php echo qty-bn(); ?>
</tr>
</table>
</td>
<td class="quantity-total">
<?php woocommerce_quantity_input(); ?>
</td>
<td class="button">
<input type="hidden" name="add-to-cart" value="<?php echo esc_attr( $product->id ); ?>" />
<input type="hidden" name="product_id" value="<?php echo esc_attr( $product->id ); ?>" />
<input type="hidden" name="variation_id" class="variation_id" value="0" />
<button type="submit" class="button buy-now-btn cart-btn product_type_simple add_to_cart_button ajax_add_to_cart" />Add to Cart</button>
</td>
</form>
</tr>
</tbody>
<?php endwhile; wp_reset_query();?>
</table>
GENERATED HTML CODE:
<table>
<thead>
<tr>
<th></th>
<th>Product</th>
<th>Note Box</th>
<th>Price</th>
<th>Choose Your Keyblade</th>
<th>Product Total Quantity</th>
<th></th>
</tr>
</thead>
<tbody>
<tr class="product-934" data-role="product">
<form action="/testsite/wholesale-product-page-template-custom/?add-to-cart=934" class="cart" method="post" enctype="multipart/form-data"></form>
<td class="image">
<img src="https://localhost/testsite/wp-content/plugins/woocommerce/assets/images/placeholder.png" alt="Placeholder" width="150px" height="150px"> </td>
<td class="title">
<h3>Group Product</h3>
</td>
<td class="note">
<label>Type Your Letter</label><input class="letter-note wh-input" name="_wholesale_letter" value="" maxlength="1" placeholder="TYPE 1 LETTER"> </td>
<td class="price">
<span class="woocommerce-Price-amount amount">
<span class="woocommerce-Price-currencySymbol">
$ </span>
786 </span>
</td>
<td class="keyblade">
<table>
<tbody><tr>
<th>Schlage-SC1</th><td><input class="sc-note wh-input wh-qty" name="_wholesale_sc" value="" type="number"></td> </tr>
<tr>
<th>Kwikset-KW1</th><td><input class="kw-note wh-input wh-qty" name="_wholesale_kw" value="" type="number"></td> </tr>
</tbody></table>
</td>
<td class="quantity-field">
<div class="quantity">
<input step="1" min="1" max="" name="quantity" value="1" title="Qty" class="input-text qty text" size="4" pattern="[0-9]*" inputmode="numeric" type="number">
</div>
</td>
<td class="button">
<input name="add-to-cart" value="934" type="hidden">
<input name="product_id" value="934" type="hidden">
<input name="variation_id" class="variation_id" value="0" type="hidden">
<button type="submit" class="button buy-now-btn cart-btn product_type_simple add_to_cart_button ajax_add_to_cart">Add to Cart</button>
</td>
</tr>
</tbody>
<style>.product-type-variable .summary .price { display: inline-block; } .quantity { display: inline-block; }</style>
<tbody><tr class="product-719 variation-722 wrapper" data-role="product">
<form class="variations_form cart" method="post" enctype="multipart/form-data" data-product_id="719" data-product_variations="null"></form>
<td class="image">
<img src="https://localhost/testsite/wp-content/uploads/2016/10/151-Sterling-Silver-Pink-Tourmaline.png" alt="Custom Key Blades-722" width="150px" height="150px"> </td>
<td class="title">
<h3>Custom Key Blades</h3><br>
<b>18 K Yellow Gold </b>
</td>
<td class="note">
<label>Type Your Letter</label><input class="letter-note wh-input" name="_wholesale_letter" value="" maxlength="1" placeholder="TYPE 1 LETTER"> </td>
<td class="price">
<span class="price"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>1,150.00</span></span> </td>
<td class="keyblade">
<table>
<tbody><tr>
<th>Schlage-SC1</th><td><input class="sc-note wh-input wh-qty" name="_wholesale_sc" value="" type="number"></td> </tr>
<tr>
<th>Kwikset-KW1</th><td><input class="kw-note wh-input wh-qty" name="_wholesale_kw" value="" type="number"></td> </tr>
</tbody></table>
</td>
<td>
<div class="quantity">
<input step="1" min="" max="" name="quantity" value="1" title="Qty" class="input-text qty text" size="4" pattern="[0-9]*" inputmode="numeric" type="number">
</div>
</td>
<td>
<input name="attribute_pa_setting" value="18-k-yellow-gold" type="hidden">
<button type="submit" class="single_add_to_cart_button btn btn-primary ajax_add_to_cart"><span class="glyphicon glyphicon-tag"></span> Add to cart</button>
<input name="variation_id" value="722" type="hidden">
<input name="product_id" value="719" type="hidden">
<input name="add-to-cart" value="719" type="hidden">
</td>
</tr>
<tr class="product-719 variation-723 wrapper" data-role="product">
<form class="variations_form cart" method="post" enctype="multipart/form-data" data-product_id="719" data-product_variations="null"></form>
<td class="image">
<img src="https://localhost/testsite/wp-content/uploads/2016/10/1470935641.png" alt="Custom Key Blades-723" width="150px" height="150px"> </td>
<td class="title">
<h3>Custom Key Blades</h3><br>
<b>18 K White Gold </b>
</td>
<td class="note">
<label>Type Your Letter</label><input class="letter-note wh-input" name="_wholesale_letter" value="" maxlength="1" placeholder="TYPE 1 LETTER"> </td>
<td class="price">
<span class="price"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>1,000.00</span></span> </td>
<td class="keyblade">
<table>
<tbody><tr>
<th>Schlage-SC1</th><td><input class="sc-note wh-input wh-qty" name="_wholesale_sc" value="" type="number"></td> </tr>
<tr>
<th>Kwikset-KW1</th><td><input class="kw-note wh-input wh-qty" name="_wholesale_kw" value="" type="number"></td> </tr>
</tbody></table>
</td>
<td>
<div class="quantity">
<input step="1" min="" max="" name="quantity" value="1" title="Qty" class="input-text qty text" size="4" pattern="[0-9]*" inputmode="numeric" type="number">
</div>
</td>
<td>
<input name="attribute_pa_setting" value="18-k-white-gold" type="hidden">
<button type="submit" class="single_add_to_cart_button btn btn-primary ajax_add_to_cart"><span class="glyphicon glyphicon-tag"></span> Add to cart</button>
<input name="variation_id" value="723" type="hidden">
<input name="product_id" value="719" type="hidden">
<input name="add-to-cart" value="719" type="hidden">
</td>
</tr>
<tr class="product-719 variation-724 wrapper" data-role="product">
<form class="variations_form cart" method="post" enctype="multipart/form-data" data-product_id="719" data-product_variations="null"></form>
<td class="image">
<img src="https://localhost/testsite/wp-content/uploads/2016/10/Modern-Iconic-Key-with-Black-Diamond-.png" alt="Custom Key Blades-724" width="150px" height="150px"> </td>
<td class="title">
<h3>Custom Key Blades</h3><br>
<b>18 K Rose Gold </b>
</td>
<td class="note">
<label>Type Your Letter</label><input class="letter-note wh-input" name="_wholesale_letter" value="" maxlength="1" placeholder="TYPE 1 LETTER"> </td>
<td class="price">
<span class="price"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>950.00</span></span> </td>
<td class="keyblade">
<table>
<tbody><tr>
<th>Schlage-SC1</th><td><input class="sc-note wh-input wh-qty" name="_wholesale_sc" value="" type="number"></td> </tr>
<tr>
<th>Kwikset-KW1</th><td><input class="kw-note wh-input wh-qty" name="_wholesale_kw" value="" type="number"></td> </tr>
</tbody></table>
</td>
<td>
<div class="quantity">
<input step="1" min="" max="" name="quantity" value="1" title="Qty" class="input-text qty text" size="4" pattern="[0-9]*" inputmode="numeric" type="number">
</div>
</td>
<td>
<input name="attribute_pa_setting" value="18-k-rose-gold" type="hidden">
<button type="submit" class="single_add_to_cart_button btn btn-primary ajax_add_to_cart"><span class="glyphicon glyphicon-tag"></span> Add to cart</button>
<input name="variation_id" value="724" type="hidden">
<input name="product_id" value="719" type="hidden">
<input name="add-to-cart" value="719" type="hidden">
</td>
</tr>
</tbody>
</table>
AND HERE IS THE JQUERY SCRIPT
<script src="https://code.jquery.com/jquery-1.11.0.js" integrity="sha256-zgND4db0iXaO7v4CLBIYHGoIIudWI5hRMQrPB20j0Qw=" crossorigin="anonymous"></script>
<script>
var quantity = 0;
$(document).ready(function () {
$('input.wh-qty').each(function () {
quantity += parseInt($(this).val());
});
$('input[name="quantity"]').val(quantity);
$('input.wh-qty').on('input', function () {
quantity = 0;
$('input.wh-qty').each(function () {
var amountInfo = parseInt($(this).val());
amountInfo = (amountInfo) ? amountInfo : 0;
quantity += amountInfo;
});
$('input[name="quantity"]').val(quantity);
});
});
</script>
I think you can give your <tr class="product-<?php... an attribute of <tr data-role="product" class="product-<?ph and then use jQuery to get and set values of each row:
$(document).ready(function(){
$('input.wh-qty').on('input', function () {
setQuantity();
});
})
const setQuantity = function(){
$.each(
$(`tr[data-role="product"]`), // add role="product" to tr
function(index,element){
const $el = $(element);
const sc = $el.find("input.sc-note.wh-qty").val();
const kw = $el.find("input.kw-note.wh-qty").val();
if(sc!=="" || kw!==""){
$el.find('input[name="quantity"]').val(
(sc*1)+(kw*1)
);
}
}
);
};
If that doesn't work could you please post the entire html so we don't need to puzzle together what the html is?
The below code is used to add new row to the table, also multiply two fields and show the result in the final field, in this dynamically generated row and at last part of code, removes the added row if it is not needed.
<script type="text/javascript">
$(window).load(function(){
$('.add-box').click(function() {
var box_html = $('<tr class="multLote"><td align="center"><input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;" /></td> ' +
'<td><textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100" > </textarea></td>' +
'<td><input type="text" name="lote20[]" value="0" class="val20" /></td>' +
'<td><input type="text" name="lote10[]" value="0" class="val10" /></td>' +
'<td><input type="text" disabled name="lote_result[]" class="lote_result" value="0"></td>' +
'<th>Remover</th></tr>');
$('#tabela-lotes tbody').append(box_html);
return false;
});
$('#tabela-lotes').on("keyup", ".multLote input", function() {
var mult = 0;
// for each row:
console.log($(this).closest('table').find("tr.multLote").length);
$(this).closest('tr.multLote').each(function() {
// get the values from this row:
var $val20 = $('.val20', this).val();
var $val10 = $('.val10', this).val();
console.log($val100);
var $total = ($val20 * $val10);
console.log($total);
// set total for the row
$('.lote_result', this).val($total);
mult += $total;
});
});
$('#tabela-lotes').on('click', '.remove-box', function(e) {
e.preventDefault();
$(this).closest('tr.multLote').remove();
});
});
</script>
This is the html code.
<form action="tabledb.php" method="POST">
<body>
<input type="button" class="add-box" value="Add">
<table id="tabela-lotes">
<thead>
<tr>
<th>
SL. NO
</th>
<th>
PRODUCT NAME
</th>
<th>
RATE PER CB
</th>
<th>
CBs
</th>
<th>
AMOUNT
</th>
</tr>
</thead>
<tbody><tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100" value="0"> </textarea>
</td>
<td>
<input type="text" name="lote20[]" class="val20" value="0">
</td>
<td>
<input type="text" name="lote10[]" class="val10" value="0">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="0">
</td>
</tr>
</tbody></table>
<table>
<tr><th>
Total CBS :</th>
<td> <input type="text" name="total_cbs" id="total_cbs" placeholder="Total CBS" style="height:25px;font-weight:bold;" onfocus="cal1()" readonly ></td></tr>
<tr><th>Total AMOUNT : </th>
<td><input type="text" name="total" id="total" placeholder="Total Rs." style="height:25px;font-weight:bold;" onfocus="cal2('.$i.')" readonly></td></tr>
</table>
<input type="submit" value="submit">
</form>
I want to the get the total coloumn sum of lote10[ ] and lote_result[ ] fields to be displayed in the total_cbs and total fields respectively.Please help, Thank you in advance.
enter image description here
I have updated my question with the image of the output, which states exactly what i need, Thank You.
Assuming the end result looks like this:
var result = 0;
var elements = document.getElementsByTagName("table")[0].getElementsByTagName("tr");
for (var i = elements.length - 1; i > elements.length - 3; i--) {
var inputs = elements[i].getElementsByTagName('input');
result += parseInt(inputs[inputs.length - 1].value);
}
console.log('total', result);
alert('total ' + result);
<table>
<tbody>
<tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100"></textarea>
</td>
<td>
<input type="text" name="lote20[]" value="0" class="val20">
</td>
<td>
<input type="text" name="lote10[]" value="0" class="val10">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="7">
</td>
<th>Remover
</th>
</tr>
<tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100"></textarea>
</td>
<td>
<input type="text" name="lote20[]" value="0" class="val20">
</td>
<td>
<input type="text" name="lote10[]" value="0" class="val10">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="7">
</td>
<th>Remover
</th>
</tr>
<tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100"></textarea>
</td>
<td>
<input type="text" name="lote20[]" value="0" class="val20">
</td>
<td>
<input type="text" name="lote10[]" value="0" class="val10">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="7">
</td>
<th>Remover
</th>
</tr>
<tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100"></textarea>
</td>
<td>
<input type="text" name="lote20[]" value="0" class="val20">
</td>
<td>
<input type="text" name="lote10[]" value="0" class="val10">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="7">
</td>
<th>Remover
</th>
</tr>
<tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100"></textarea>
</td>
<td>
<input type="text" name="lote20[]" value="0" class="val20">
</td>
<td>
<input type="text" name="lote10[]" value="0" class="val10">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="7">
</td>
<th>Remover
</th>
</tr>
</tbody>
</table>
JSFIDDLE