Develop Reference

How to get total sum from input values using Javascript?

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>

Total sum of columns of one row

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>

Confirmation Page and foreach statement

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>

Web page submit button that parses current page

From the following web page code:
(Don't read through it now - just skip past it and take a look at what I'm needing to grab onto from the following code then you can come back to this code.)
<table class="shop_table cart" cellspacing="0">
<thead>
<tr>
<th class="product-remove"> </th>
<th class="product-thumbnail"> </th>
<th class="product-name">Product</th>
<th class="product-price">Price</th>
<th class="product-quantity">Quantity</th>
<th class="product-subtotal">Total</th>
</tr>
</thead>
<tbody>
<tr class="cart_item">
<td class="product-remove">
×
</td>
<td class="product-thumbnail">
<a href="http://dev123.MyDomain.com/product/5-htp-power/">
<img width="90" height="90" src="http://dev123.MyDomain.com/wp-content/uploads/2014/04/product/2806-90x90.jpg" class="attachment-shop_thumbnail wp-post-image" alt="2806" />
</a>
</td>
<td class="product-name">
5-HTP Power
</td>
<td class="product-price">
<span class="amount">$19.55</span>
</td>
<td class="product-quantity">
<div class="quantity">
<input type="number" step="1" name="cart[02e74f10e0327ad868d138f2b4fdd6f0][qty]" value="35" title="Qty" class="input-text qty text" size="4" />
</div>
</td>
<td class="product-subtotal">
<span class="amount">$97.75</span>
</td>
</tr>
<tr class="cart_item">
<td class="product-remove">
×
</td>
<td class="product-thumbnail">
<a href="http://dev123.MyDomain.com/product/5-w/">
<img width="90" height="90" src="http://dev123.MyDomain.com/wp-content/uploads/2014/04/product/1120-90x90.jpg" class="attachment-shop_thumbnail wp-post-image" alt="1120" />
</a>
</td>
<td class="product-name">
5-W
</td>
<td class="product-price">
<span class="amount">$19.35</span>
</td>
<td class="product-quantity">
<div class="quantity">
<input type="number" step="1" name="cart[6ea9ab1baa0efb9e19094440c317e21b][qty]" value="104" title="Qty" class="input-text qty text" size="4" />
</div>
</td>
<td class="product-subtotal">
<span class="amount">$77.40</span>
</td>
</tr>
<tr class="cart_item">
<td class="product-remove">
×
</td>
<td class="product-thumbnail">
<a href="http://dev123.MyDomain.com/product/7-keto/">
<img width="90" height="90" src="http://dev123.MyDomain.com/wp-content/uploads/2014/04/product/2922-90x90.jpg" class="attachment-shop_thumbnail wp-post-image" alt="2922" />
</a>
</td>
<td class="product-name">
7-Keto
</td>
<td class="product-price">
<span class="amount">$38.25</span>
</td>
<td class="product-quantity">
<div class="quantity">
<input type="number" step="1" name="cart[c16a5320fa475530d9583c34fd356ef5][qty]" value="3" title="Qty" class="input-text qty text" size="4" />
</div>
</td>
<td class="product-subtotal">
<span class="amount">$114.75</span>
</td>
</tr>
<tr class="cart_item">
<td class="product-remove">
×
</td>
<td class="product-thumbnail">
<a href="http://dev123.MyDomain.com/product/acidophilus/">
<img width="90" height="90" src="http://dev123.MyDomain.com/wp-content/uploads/2014/04/product/1666-90x90.jpg" class="attachment-shop_thumbnail wp-post-image" alt="1666" />
</a>
</td>
<td class="product-name">
Acidophilus
</td>
<td class="product-price">
<span class="amount">$15.95</span>
</td>
<td class="product-quantity">
<div class="quantity">
<input type="number" step="1" name="cart[182be0c5cdcd5072bb1864cdee4d3d6e][qty]" value="22" title="Qty" class="input-text qty text" size="4" />
</div>
</td>
<td class="product-subtotal">
<span class="amount">$31.90</span>
</td>
</tr>
<tr>
<td colspan="6" class="actions">
<div class="coupon">
<label for="coupon_code">Coupon:</label>
<input type="text" name="coupon_code" class="input-text" id="coupon_code" value="" placeholder="Coupon code" />
<input type="submit" class="button" name="apply_coupon" value="Apply Coupon" />
</div>
I need to grab onto the following items:
the 2806 part of alt="2806"
the 35 part of value="35" title="Qty"
the 1120 part of alt="1120"
the 104 part of value="104" title="Qty"
the 2922 part of alt="2922"
the 3 part of value="3" title="Qty"
the 1666 part of alt="1666"
the 22 part of value="22" title="Qty"
I have looked at this page:
Javascript: How to loop through ALL DOM elements on a page?
and this page:
http://www.w3schools.com/js/js_htmldom_nodelist.asp
and I'm in a little bit over my head.
What I need to have is some javascript code that will result in... a variable that contains the following:
<input type="hidden" name="prodnum" value="2806" />
<input type="hidden" name="prodqty" value="35" />
<input type="hidden" name="prodnum" value="1120" />
<input type="hidden" name="prodqty" value="104" />
<input type="hidden" name="prodnum" value="2922" />
<input type="hidden" name="prodqty" value="3" />
<input type="hidden" name="prodnum" value="1666" />
<input type="hidden" name="prodqty" value="22" />
I'm going to continue to struggle with this to see if I can figure it out myself but the odds are not in my favor.
Thanks for any help you can provide!

You could do it using a three-dimensional javascript object:
jsFiddle Demo
var stObj = {};
$('#mybutt').click(function(){
var cnt = 0;
$('.shop_table tbody tr:not(:last-child)').each(function(){
//alert( this.className );
cnt++;
stObj[cnt] = {};
$this = $(this);
var thImg = $this.find('.product-thumbnail a img').attr('alt');
//alert(thImg);
var prQty = $this.find('.product-quantity div input').val();
//alert(prQty);
stObj[cnt]['thImg'] = thImg;
stObj[cnt]['prQty'] = prQty;
});
alert( JSON.stringify(stObj) );
});
Notes:
(1) Object stObj is defined globally (i.e. outside - above - the functions in which it is used)
(2) jQuery selector tr:not(:last-child) prevents trying to find alt and value in last table row
(3) In jsFiddle, the #tst div is immediately hidden by code. If visible, it just shows the code is broken without having to push any buttons.
References:
Multi-dimensional associative arrays in javascript
javascript or jquery: Looping a multidimensional object

javascript for form validation works in firefox but not IE8

I am very new to javascript, and took a chunk of code and modified it for my own use. It works fine in Firefox (*NIX and Windows). In IE8, the text field validation works fine, but the select drop downs return as invalid even when an option is selected.
<!DOCTYPE html>
<head>
<meta charset="utf-8 />
<link href="/FNMOC/CSS/styles.main.css" rel="stylesheet" type="text/css">
<title>Fleet Numerical Meteorology and Oceanography Center</title>
<link rel="icon" href="favicon.ico">
<script type="text/javascript">
var RequiredFieldIDs =
'FirstName,LastName,Affiliation,Command,Email,Phone,METOC,Classification,Purpose,Priority,Due,NELat,SWLat,NELong,SWLong';
function CheckRequiredFields()
{
RequiredFieldIDs = RequiredFieldIDs.replace(/[, ]+/,",");
var idList = RequiredFieldIDs.split(",");
var Empties = new Array();
{
var s = TrimFormFieldValues(document.getElementbyId(idList[i]).value);
if (s.length<1) { Empties.push(idList[i]); }
}
if (! Empties.length) { return true; }
var ess = new String ("\n\nThe Following are required:\n");
for (var i=0; i<Empties.length; i++) { ess += '\n\t' + Empties[i]; }
alert (ess);
return false;
}
function TrimFormFieldValues(s)
{
s = s.replace (/^\s*/,"");
s = s.replace (/\s*$/,"");
}
</script>
<script type="text/javascript">
function ShowMenu()
{
var form = document.climo;
var field = form.Classification;
var select = field.selectedIndex;
{
if(select == 4) document.getElementById('tableHide').style.display = '';
else document.getElementById('tableHide').style.display = 'none';
}
}
</script>
<script type="text/javascript">
function ShowMenu2()
{
var form = document.climo;
var field = form.Affiliation;
var select = field.selectedIndex;
{
if(select == 1)document.getElementById('tableHide2').style.display = "";
else document.getElementById('tableHide2').style.display = 'none';
}
}
</script>
</head>
<body>
<div class="wrapper">
<div class="banner">
<iframe src="/FNMOC/banner.html" width="100%" height="30" frameBorder="0" scrolling="no">
</iframe>
</div>
<div class="classification">
<h2>THIS PAGE UNCLASSIFIED</h2>
</div>
<div class="header">
<a href="/FNMOC/index.html">
<img class="floatright" src="/FNMOC/IMAGES/fnmoc.png" />
</a>
<br />
<h3>
We produce and deliver weather, ocean and climate information for Fleet Safety, Warfighting Effectiveness and National Defense.
<br />
<br />
Atmospheric and Oceanographic Prediction enabling Fleet Safety and Decision Superiority
</h3>
<br />
<br />
</div>
<div class="left_col">
<iframe src="/FNMOC/menu.html" width="100%" height="800" frameBorder="0" scrolling="no">
</iframe>
</div>
<div class="main_col">
<center>
<h2>FORM UNCLASSIFIED UNTIL FILLED OUT</h2>
<h2>Climatology Support Request</h2>
</center>
<form name=climo action="/CGI/mail-form-climo.cgi" method="post" onsubmit="return CheckRequiredFields();">
<table border="0" cellpadding="5" width="100%">
<tr>
<td width="100%" colspan="2" align="center">
<hr>
<b>
<h2>
<center>
Contact Information
</h2>
</b>
<i>
* indicates required field
</i>
</center>
<hr>
</td>
</tr>
<tr>
<td width="30%">
<b>* First Name:</b>
</td>
<td width="70%">
<input type="text" id="FirstName" size="20" maxlength="250" name="1. First Name:">
</input>
</td>
</tr>
<tr>
<td width="30%">
<b>* Last Name:</b>
</td>
<td width="70%">
<input type="text" id="LastName" size="30" maxlength="250" name="2. Last Name:">
</input>
</td>
</tr>
<tr>
<td width="30%">
<b>* Affiliation:</b>
</td>
<td width="70%">
<select id="Affiliation" name="3. Affiliation:" onchange="!!(ShowMenu2());" size="1">
<option></option>
<option>MIL</option>
<option>CIV</option>
<option>CTR></option>
</select>
</td>
</tr>
<tr>
<td width="30%">
</td>
<td width="70%">
<table style="display:none" id="tableHide2">
<tr>
<td>
Branch of Service:
<select name="4. Branch of Service:" size="1">
<option></option>
<option>USN</option>
<option>USAF</option>
<option>USA</option>
<option>USMC</option>
<option>USCG</option>
</select>
</td>
</tr>
<tr>
<td>
Rank:
<input type="text" id="Rank" size="10" maxlength="10" name="5. Rank:">
</input>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="30%">
<b>
* Command/Organization:
</b>
</td>
<td width="70%">
<input="text" id="Command" size="30" maxlength="250" name="6. Command/Organization:">
</input>
</td>
</tr>
<tr>
<td width="30%">
<b>* Email:</b>
</td>
<td width="70%">
<input type="text" id="Email" size="30" maxlength="250" name="7. Email:"
</input>
</td>
</tr>
<tr>
<td width="30%">
<b>* Phone Number:</b>
</td>
<td width="70%">
<input type="text" id="Phone" size="30" maxlength="30" name="8. Phone number:">
</input>
</td>
</tr>
<tr>
<td width="30%">
<b>DSN:</b>
</td>
<td width="70%">
<input type="text" size="13" maxlength="13" name="9. DSN:">
</input>
</td>
</tr>
<tr>
<td width="30%>
<b>* Are you meterologist or Oceanographer personnel?</b>
</td>
<td width="70%">
<select id="METOC" name="11. METOC:">
<option></option>
<option>YES</option>
<option>NO</option>
</select>
</td>
</tr>
<tr>
<tr width="100%" colspan="2" align="center">
<hr>
<b>
<h2>
Security Classification
</h2>
</b>
<center>
<i>
* indicates required field
</i>
</center>
<hr>
<i>
If classified, provide derivative and declassification info please.
</i>
<hr>
<br />
</td>
</tr>
<tr>
<td width="30%">
<b>* Classification of this request:</b>
</td>
<td width="70%">
<select id="Classification" name="12. Classification:" onchange="!!(ShowMenu()); size="1">
<option></option>
<option>UNCLASSIFIED</option>
<option>CONFIDENTIAL</option>
<option>SECRET</option>
<option>TOP SECRET</option>
</select>
</td>
</tr>
<tr>
<td width="30%">
</td>
<td width="70">
<table style="display:none" id="tableHide">
<tr>
<td>
<input type=checkbox name="12a. Caveat:" value="SI">SI</input>
<input type=checkbox name="12b. Caveat:" value="TK">TK</input>
<input type=checkbox name="12c. Caveat:" value="NOFORN">NOFORN</input>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="30%">
<b>Classified By:</b>
</td>
<td width="70%">
<input type="text" size="40" maxlength="250" name="13. Classified By:">
</input>
</td>
</tr>
<td width="100%" colspan="2" align="center">
<hr>
<b>
<h2>
Request Information
</h2>
</b>
<i>
* Indicates Required Field
</i>
<hr>
</td>
</tr>
<tr>
<td width="100%" colspan="2" align="center">
<b>
MISSION INFORMATION
</b>
<hr>
<br />
</td>
</tr>
<tr>
<td width="30%">
<b>* Mission Support Catagory:</b>
</td>
<td width="70%">
<select id=Purpose name="17. Purpose:" size="1">
<option></option>
<option>Combat/Operation</option>
<option>Contingency</option>
<option>Exercise</option>
<option>Training</option>
<option>Experiment</option>
<option>Research</option>
</select>
<b>Mission Name:</b>
<input type="text" size="20" maxlength="250" name="18. Purpose name:">
</input>
</td>
</tr>
<tr>
<td width="30%">
<b>* Priority</b>
</td>
<td width="70%">
<select id="Priority" name="19. Priority:" size="1">
<option></option>
<option>LOW</option>
<option>MED</option>
<option>HIGH</option>
<option>URGENT</option>
</select>
</td>
</tr>
<tr>
<td width="30%">
<b>* Due date:</b>
</td>
<td width="70%">
<input type="text" size="10" maxlength="10" id="Due" name="20. Date due:">
</input>
</td>
</tr>
<tr>
<td width="30%">
<b>* Location</b>
<br />
provide NE/SW corner latitude and longitude in decimal format of each mesh you will use for applicataion/forcasting.
<br />
Northern hemisphere latitude is + and Southern hemisphere latitude is -, Eastern longitude from GMT is + and Western longitude from GMT is -.
</td>
<td width="70%">
<table>
<tr>
<td width="50%" aligh="right">
NE Latitude: <input type="text" id=NELat size="10" maxlength="250" name="22. NE Lat:">
</input>
<br />
SW Latitude: <input type="text" id=SWLat size="10" maxlength="250" name="23. SW Lat:">
</input>
</td>
<td width="50%" align="right">
NE Longitude: &nbsp<input type="text" id=NELong size="10" maxlength="250" name="24. NE Long:">
</input>
<br />
SW Longitude: <input type="text" id=SWLong size="10" maxlength="250" name="25. SW Long:">
</input>
</td>
</tr>
</table>
</td>
</tr>
</table>
<hr>
<center>
<input type="submit" name="Submit" value="Submit">
</input>
<input type="reset" name="Reset" value="Reset">
</input>
</center>
</form>
</div>
<br class="cleaner" />
<div class="classification">
<h2>THIS PAGE UNCLASSIFIED</h2>
</div>
<div class="banner">
<iframe src="/FNMOC/banner.html" width="100%" height="30" frameBorder="0" scrolling="no">
</iframe>
</div>
</div>
</body>
</html>
The other select fields have the same code, just different names/values. No selection validates in IE8. Your help greatly appreciated.
edited to add all code as per request

The way you validate select box is not correct. You can get value of the selected option like select.value and it will work in Forefox and Chrome. However the proper way to do it so that IE could also understand it, is using the value of selected option:
var el = document.getElementbyId(idList[i]);
var s = TrimFormFieldValues(el.options[el.selectedIndex].value);
If you have different type of controls in your form, you can check if the current one is selectbox with this check:
if (idList[i].tagName == 'SELECT') {
// this is select, get the value using el.options[el.selectedIndex].value
}