Develop Reference

how to get data from one textbox to another textbox in dynamically generated html table?

below is my code. in that code when i enter 3 in txtbox and click copy.then same table will be generated 3 times. if i enter name and id in txtbox 1 and 2 and click get data then it will be set to txtbox 3 and 4.it works fine only with first table. the problem is it is not working with dynamic tables.help me!!
the code as follows,
function copytbl() {
var i, j;
j = document.getElementById("txtbox").value;
for (i = 0; i < j - 1; i++) {
var row = document.getElementById("tblbdy"); // find row to copy
var table = document.getElementById("tbl"); // find table to append to
var clone = row.cloneNode(true); // copy children too
clone.id = "newID"; // change id or other attributes/contents
table.appendChild(clone); // add new row to end of table
}
}
function getdata() {
document.getElementById("txtbox3").value = document.getElementById("txtbox1").value;
document.getElementById("txtbox4").value = document.getElementById("txtbox2").value;
}
function isNumber(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
return true;
}
table,
td {
border: 1px solid black;
border-collapse: collapse;
height: 90px;
text-align: left;
}
tr.noBorder td {
border-right-style: hidden;
border-left-style: hidden;
}
<input type="text" id="txtbox" name="textbox" onkeypress="return isNumber(event)" />
<input type="reset" value="Reset">
<button type="button" onclick="copytbl()">COPY</button><br>
<br>
<table id="tbl" style="width:100%">
<tbody id="tblbdy">
<tr>
<td colspan="5">Header</td>
</tr>
<tr>
<td>Name</td>
<td colspan="3">Age</td>
<td>Sex</td>
</tr>
<tr>
<td rowspan="3">
Name:<br>
<input type="text" id="txtbox1" name="textbox" /><br> Id:
<br>
<input type="text" id="txtbox2" name="textbox" onkeypress="return isNumber(event)" /><br>
<input type="reset" value="Reset">
</td>
<td></td>
<td></td>
<td></td>
<td rowspan="3">
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<br>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td colspan="4"></td>
</tr>
<tr>
<td colspan="5">Footer</td>
</tr>
<tr class="noBorder">
<td>
<br>
<button type="button" onclick="getdata()">GET DATA</button><br><br> Name:
<br>
<input type="text" id="txtbox3" name="textbox" /><br> Id:
<br>
<input type="text" id="txtbox4" name="textbox" /><br>
</td>
</tr>
</table>
thanks in advance

You need to change the id's you are using into classes. Then parse the new tbody id you generate into the getdata Function
Demo https://jsfiddle.net/kplcode/bt5da5go/2/
function copytbl() {
var i, j;
j = document.getElementById("txtbox").value;
for (i = 0; i < j - 1; i++) {
var newId = "newID-"+(document.querySelectorAll('.tblbdy-ele').length+i);
var row = document.getElementById("tblbdy"); // find row to copy
var table = document.getElementById("tbl"); // find table to append to
var clone = row.cloneNode(true); // copy children too
clone.id = newId; // change id or other attributes/contents
table.appendChild(clone); // add new row to end of table
var getDataBtn = document.getElementById(newId).getElementsByClassName("getDataBtn")[0]
getDataBtn.onclick = function() {
getdata(newId);
};
}
}
function getdata(id) {
var table = document.getElementById(id);
document.getElementById(id).getElementsByClassName("txtbox3")[0].value = document.getElementById(id).getElementsByClassName("txtbox1")[0].value;
document.getElementById(id).getElementsByClassName("txtbox4")[0].value = document.getElementById(id).getElementsByClassName("txtbox2")[0].value;
}
function isNumber(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
return true;
}

Replaces Value in the first row

I really need help in my add to cart function. The problem is that when i added product in the shopping cart the second time, it replaces the value in the first. It should be displayed in another row. Please help me. Thanks.
var qtyTotal = 0;
var priceTotal = 0;
var products = [];
function addProduct() {
var productID = document.getElementById("productID").value;
var product_desc = document.getElementById("product_desc").value;
var qty = document.getElementById("quantity").value;
// qtyTotal = qtyTotal + parseInt(qty);
//document.getElementById("qtyTotals").innerHTML=qtyTotal;
var price = document.getElementById("price").value;
var newProduct = {
product_id : null,
product_desc : null,
product_qty : 0,
product_price : 0.00,
};
newProduct.product_id = productID;
newProduct.product_desc = product_desc;
newProduct.product_qty = qty;
newProduct.product_price = price;
products.push(newProduct);
//console.log("New Product " + JSON.stringify(newProduct))
//console.log("Products " + JSON.stringify(products))
var html = "<table border='1|1' >";
html+="<td>Product ID</td>";
html+="<td>Product Description</td>";
html+="<td>Quantity</td>";
html+="<td>Price</td>";
html+="<td>Action</td>";
for (var i = 0; i < products.length; i++) {
html+="<tr>";
html+="<td>"+products[i].product_id+"</td>";
html+="<td>"+products[i].product_desc+"</td>";
html+="<td>"+products[i].product_qty+"</td>";
html+="<td>"+products[i].product_price+"</td>";
html+="<td><button type='submit' onClick='deleteProduct(\""+products[i].product_id +"\", this);'/>Delete Item</button> &nbsp <button type='submit' onClick='addCart(\""+products[i].product_id +"\", this);'/>Add to Cart</button></td>";
html+="</tr>";
}
html+="</table>";
document.getElementById("demo").innerHTML = html;
document.getElementById("resetbtn").click()
}
function deleteProduct(product_id, e) {
e.parentNode.parentNode.parentNode.removeChild(e.parentNode.parentNode);
for(var i = 0; i < products.length; i++) {
if (products[i].product_id == product_id) {
// DO NOT CHANGE THE 1 HERE
products.splice(i, 1);
}
}
}
function addCart(product_id){
var html = "<table border='1|1'>";
html+="<td>Product ID</td>";
html+="<td>Product Description</td>";
html+="<td>Quantity</td>";
html+="<td>Price</td>";
html+="<td>Total</td>";
html+="<td>Action</td>";
for (var i = 0; i < products.length; i++) {
if (products[i].product_id == product_id) {
products[i].product_qty = parseInt(products[i].product_qty) + 1;
html+="<tr>";
html+="<td>"+products[i].product_id+"</td>";
html+="<td>"+products[i].product_desc+"</td>";
html+="<td>"+products[i].product_qty+"</td>";
html+="<td>"+products[i].product_price+"</td>";
html+="<td>"+parseInt(products[i].product_price)*parseInt(products[i].product_qty)+"</td>";
html+="<td><button type='submit' onClick='subtractQuantity(\""+products[i].product_id +"\", this);'/>Subtract Quantity</button></td>";
html+="</tr>";
}
}
html+="</table>";
document.getElementById("demo2").innerHTML = html;
}
function subtractQuantity(product_id)
{ alert(product_id);
for(var i = 0; i < products.length; i++) {
if (products[i].product_id == product_id & products[i].product_qty >= 1) {
products[i].product_qty = parseInt(products[i].product_qty) - 1;
}
if (products[i].product_id == 0) {
removeItem(products[i].product_id);
}
console.log("Products " + JSON.stringify(products));
}
}
function removeItem(product_id) {
for(var i = 0; i < products.length; i++) {
if (products[i].product_id == product_id) {
// DO NOT CHANGE THE 1 HERE
products.splice(i, 1);
}
}
}
<!DOCTYPE html>
<html>
<head>
<title>Shopping Cart Pure Javascript</title>
</head>
<body>
<form name="order" id="order">
<table>
<tr>
<td>
<label for="productID">Product ID:</label>
</td>
<td>
<input id="productID" name="product" type="text" size="28" required/>
</td>
</tr>
<tr>
<td>
<label for="product">Product Desc:</label>
</td>
<td>
<input id="product_desc" name="product" type="text" size="28" required/>
</td>
</tr>
<tr>
<td>
<label for="quantity">Quantity:</label>
</td>
<td>
<input id="quantity" name="quantity" width="196px" required/>
</td>
</tr>
<tr>
<td>
<label for="price">Price:</label>
</td>
<td>
<input id="price" name="price" size="28" required/>
</td>
</tr>
</table>
<input type="reset" name="reset" id="resetbtn" class="resetbtn" value="Reset" />
<input type="button" id="btnAddProduct" onclick="addProduct();" value="Add New Product" >
</form>
<br>
<p id="demo"></p> <br/>
<h2> Shopping Cart </h2>
<p id="demo2"></p>
</body>
</html>

Check below code. I have change it with javascript.
var qtyTotal = 0;
var priceTotal = 0;
var products = [];
function addProduct() {
var productID = document.getElementById("productID").value;
var product_desc = document.getElementById("product_desc").value;
var qty = document.getElementById("quantity").value;
// qtyTotal = qtyTotal + parseInt(qty);
//document.getElementById("qtyTotals").innerHTML=qtyTotal;
var price = document.getElementById("price").value;
var newProduct = {
product_id : null,
product_desc : null,
product_qty : 0,
product_price : 0.00,
};
newProduct.product_id = productID;
newProduct.product_desc = product_desc;
newProduct.product_qty = qty;
newProduct.product_price = price;
products.push(newProduct);
//console.log("New Product " + JSON.stringify(newProduct))
//console.log("Products " + JSON.stringify(products))
var html = "<table border='1|1' >";
html+="<td>Product ID</td>";
html+="<td>Product Description</td>";
html+="<td>Quantity</td>";
html+="<td>Price</td>";
html+="<td>Action</td>";
for (var i = 0; i < products.length; i++) {
html+="<tr>";
html+="<td>"+products[i].product_id+"</td>";
html+="<td>"+products[i].product_desc+"</td>";
html+="<td>"+products[i].product_qty+"</td>";
html+="<td>"+products[i].product_price+"</td>";
html+="<td><button type='submit' onClick='deleteProduct(\""+products[i].product_id +"\", this);'/>Delete Item</button> &nbsp <button type='submit' onClick='addCart(\""+products[i].product_id +"\", this);'/>Add to Cart</button></td>";
html+="</tr>";
}
html+="</table>";
document.getElementById("demo").innerHTML = html;
document.getElementById("resetbtn").click()
}
function deleteProduct(product_id, e) {
e.parentNode.parentNode.parentNode.removeChild(e.parentNode.parentNode);
for(var i = 0; i < products.length; i++) {
if (products[i].product_id == product_id) {
// DO NOT CHANGE THE 1 HERE
products.splice(i, 1);
}
}
}
function addCart(product_id){
var html = '';
var ele = document.getElementById("demo2");
if(ele.innerHTML == '')
{
html+="<table id='tblCart' border='1|1'>";
html+="<tr><td>Product ID</td>";
html+="<td>Product Description</td>";
html+="<td>Quantity</td>";
html+="<td>Price</td>";
html+="<td>Total</td>";
html+="<td>Action</td></tr>";
}
for (var i = 0; i < products.length; i++) {
if (products[i].product_id == product_id) {
products[i].product_qty = parseInt(products[i].product_qty) + 1;
html+="<tr>";
html+="<td>"+products[i].product_id+"</td>";
html+="<td>"+products[i].product_desc+"</td>";
html+="<td>"+products[i].product_qty+"</td>";
html+="<td>"+products[i].product_price+"</td>";
html+="<td>"+parseInt(products[i].product_price)*parseInt(products[i].product_qty)+"</td>";
html+="<td><button type='submit' onClick='subtractQuantity(\""+products[i].product_id +"\", this);'/>Subtract Quantity</button></td>";
html+="</tr>";
}
}
if(ele.innerHTML == '')
{
html+= "</table>";
ele.innerHTML = html;
}
else
{
document.getElementById("tblCart").innerHTML += html;
}
}
function subtractQuantity(product_id)
{ alert(product_id);
for(var i = 0; i < products.length; i++) {
if (products[i].product_id == product_id & products[i].product_qty >= 1) {
products[i].product_qty = parseInt(products[i].product_qty) - 1;
}
if (products[i].product_id == 0) {
removeItem(products[i].product_id);
}
console.log("Products " + JSON.stringify(products));
}
}
function removeItem(product_id) {
for(var i = 0; i < products.length; i++) {
if (products[i].product_id == product_id) {
// DO NOT CHANGE THE 1 HERE
products.splice(i, 1);
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Shopping Cart Pure Javascript</title>
</head>
<body>
<form name="order" id="order">
<table>
<tr>
<td>
<label for="productID">Product ID:</label>
</td>
<td>
<input id="productID" name="product" type="text" size="28" required/>
</td>
</tr>
<tr>
<td>
<label for="product">Product Desc:</label>
</td>
<td>
<input id="product_desc" name="product" type="text" size="28" required/>
</td>
</tr>
<tr>
<td>
<label for="quantity">Quantity:</label>
</td>
<td>
<input id="quantity" name="quantity" width="196px" required/>
</td>
</tr>
<tr>
<td>
<label for="price">Price:</label>
</td>
<td>
<input id="price" name="price" size="28" required/>
</td>
</tr>
</table>
<input type="reset" name="reset" id="resetbtn" class="resetbtn" value="Reset" />
<input type="button" id="btnAddProduct" onclick="addProduct();" value="Add New Product" >
</form>
<br>
<p id="demo"></p> <br/>
<h2> Shopping Cart </h2>
<p id="demo2"></p>
</body>
</html>

document.getElementById("demo2").innerHTML = html;
Every time, that function is being called, you are changing the innerHTML of of 'demo2' whereas what you need to do is append to it. Use
document.getElementById("demo2").innerHTML += html;
Also, it is not a good idea to use the innerHTML property.It destroys references thus killing eventListeners or similar stuff linked to the object. Hope it helps !

Dynamic HTML form not removing rows - Javascript error

I'm nearing the end of this script and I've noticed an error.
It's possible to add rows to the table, however when I try to remove them it doesn't seem to work. I'm guessing the error is somewhere in my JS. It was working before and then stopped working all of a sudden! Can someone please shed some light on it?
Thanks,
Snelly
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type="text/javascript">
function calculate(object) {
var QTY = object.parentNode.parentNode.querySelector('#Qty').value;
var LINEPRICENET = object.parentNode.parentNode.querySelector("#LinePriceNet").value;
var LINEPRICEDISCOUNT = object.parentNode.parentNode.querySelector("#LinePriceDiscountInput").value;
var TAXRATE = object.parentNode.parentNode.querySelector("#TaxRate").value;
// Lineprice with discount
LinePriceAfterDiscount = (QTY * (LINEPRICENET - (LINEPRICENET * (LINEPRICEDISCOUNT))));
object.parentNode.parentNode.querySelector('#LinePriceAfterDiscount').value = LinePriceAfterDiscount.toFixed(2);
//Line Price discount Amount
LINEPRICEDISCOUNTAMOUNT = (QTY * (LINEPRICENET) - (QTY * (LINEPRICENET - (LINEPRICENET * (LINEPRICEDISCOUNT)))));
object.parentNode.parentNode.querySelector("#LinePriceDiscountAmount").value = LINEPRICEDISCOUNTAMOUNT.toFixed(2);
//Tax calculation
TAXAMOUNT = (LinePriceAfterDiscount * TAXRATE);
object.parentNode.parentNode.querySelector("#TaxAmount").value = TAXAMOUNT.toFixed(2);
//Calc Gross
LINEPRICEGROSSAMOUNT = (LinePriceAfterDiscount + TAXAMOUNT);
object.parentNode.parentNode.querySelector("#GrossOutput").value = LINEPRICEGROSSAMOUNT.toFixed(2);
/******Calculate totals*******/
//net
var arr = document.getElementsByName('LinePriceAfterDiscount[]');
var tot = 0;
for (var i = 0; i < arr.length; i++) {
if (parseInt(arr[i].value))
tot += parseInt(arr[i].value);
}
document.getElementById('TotalNetAmount').value = tot;
//VAT
var arr = document.getElementsByName('TaxAmount[]');
var tot = 0;
for (var i = 0; i < arr.length; i++) {
if (parseInt(arr[i].value))
tot += parseInt(arr[i].value);
}
document.getElementById('TotalTaxAmount').value = tot;
//Gross
var NetTotal = document.getElementById('TotalNetAmount').value;
var TaxTotal = document.getElementById('TotalTaxAmount').value;
GrossTotal = (+NetTotal + +TaxTotal);
document.getElementById('TotalGrossAmount').value = GrossTotal;
}
/******Adding and removing rows******/
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for (var i = 0; i < colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
}
}
function deleteRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for (var i = 0; i < rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if (null != chkbox && true == chkbox.checked) {
if (rowCount <= 1) { // limit the user from removing all the fields
alert("Cannot Remove all of the items!.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
}
</script>
</head>
<body>
<form name="CalculationTesting">
<p>
<input type="button" value="Add Item" onClick="addRow('dataTable')" />
<input type="button" value="Remove Selected Item" onClick="deleteRow('dataTable')" />
</p>
<thead>
<tr>
<th>Qty 1|||</th>
<th>Line Price Net 2|||</th>
<th>Line Price Discount% 3|||</th>
<th>Line Price Discount Amount 4|||</th>
<th>Line Price With Discount 5|||</th>
<th>VAT Rate Amount 6|||</th>
<th>VAT Amount 7|||</th>
<th>Line Price Gross-OUTPUT 8|||</th>
</tr>
</thead>
<!-- start -->
<table id="dataTable" border="1" width="600" height="50" cellpadding="10" cellspacing="3">
<tr>
<td>
<input type="checkbox" required="required" name="chk[]" checked="checked" /></td>
</td>
<td>
<input type="number" name="Qty[]" id="Qty" step="1" onblur="this.value = parseFloat(Math.round(this.value * 100) / 100).toFixed(2);" onchange="calculate(this);" />
</td>
<td>
<input type="number" name="LinePriceNet[]" step="0.01" id="LinePriceNet" onblur="this.value = parseFloat(Math.round(this.value * 100) / 100).toFixed(2);" onchange="calculate(this);" />
</td>
<td>
<select type="number" name="LinePriceDiscount" id="LinePriceDiscountInput" onchange="calculate(this);" />
<option value="0.00">None</option>
<option value="0.01">1%</option>
<option value="0.02">2%</option>
<option value="0.03">3%</option>
<option value="0.04">4%</option>
<option value="0.05">5%</option>
<option value="0.06">6%</option>
<option value="0.07">7%</option>
<option value="0.08">8%</option>
<option value="0.09">9%</option>
<option value="0.10">10%</option>
</select>
</td>
<td>
<input readonly="readonly" type="number" name="LinePriceDiscountAmount[]" id="LinePriceDiscountAmount">
</td>
<td>
<input readonly="readonly" type="number" name="LinePriceAfterDiscount[]" id="LinePriceAfterDiscount">
</td>
<td>
<select type="number" name="TaxRate" id="TaxRate" onchange="calculate(this);" />
<option value="0.00">Zero Rate</option>
<option value="0.20">Standard(20%)</option>
<option value="0.00">Exempt</option>
<option value="0.05">Reduced Rate</option>
<option value="0.00">Outside The Scope</option>
</select>
</td>
<td>
<input readonly="readonly" type="number" name="TaxAmount[]" id="TaxAmount">
</td>
<td>
<input readonly="readonly" type="number" name="GrossOutput[]" id="GrossOutput">
</td>
</tr>
</table>
<table>
<tr>
<td><label>Net Amount</label>
<input readonly="readonly" type="number" name="TotalNetAmount[]" id="TotalNetAmount">
</td>
</tr>
<tr>
<td><label>VAT Amount</label>
<input readonly="readonly" type="number" name="TotalTaxAmount[]" id="TotalTaxAmount">
</td>
</tr>
<tr>
<td><label>Gross Amount</label>
<input readonly="readonly" type="number" name="TotalGrossAmount[]" id="TotalGrossAmount">
</td>
</tr>
</table>
</form>
</body>
</html>

Here are the code to work:
function deleteRow(tableID) {
debugger;
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for (var i = 0; i < rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0].nextElementSibling;
if (chkbox != null && chkbox.checked) {
if (rowCount <= 1) { // limit the user from removing all the fields
alert("Cannot Remove all of the items!.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
}

For some reason childNodes[0] is text and childNodes[1] is the input you're looking for.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type="text/javascript">
function calculate(object) {
var QTY = object.parentNode.parentNode.querySelector('#Qty').value;
var LINEPRICENET = object.parentNode.parentNode.querySelector("#LinePriceNet").value;
var LINEPRICEDISCOUNT = object.parentNode.parentNode.querySelector("#LinePriceDiscountInput").value;
var TAXRATE = object.parentNode.parentNode.querySelector("#TaxRate").value;
// Lineprice with discount
LinePriceAfterDiscount = (QTY * (LINEPRICENET - (LINEPRICENET * (LINEPRICEDISCOUNT))));
object.parentNode.parentNode.querySelector('#LinePriceAfterDiscount').value = LinePriceAfterDiscount.toFixed(2);
//Line Price discount Amount
LINEPRICEDISCOUNTAMOUNT = (QTY * (LINEPRICENET) - (QTY * (LINEPRICENET - (LINEPRICENET * (LINEPRICEDISCOUNT)))));
object.parentNode.parentNode.querySelector("#LinePriceDiscountAmount").value = LINEPRICEDISCOUNTAMOUNT.toFixed(2);
//Tax calculation
TAXAMOUNT = (LinePriceAfterDiscount * TAXRATE);
object.parentNode.parentNode.querySelector("#TaxAmount").value = TAXAMOUNT.toFixed(2);
//Calc Gross
LINEPRICEGROSSAMOUNT = (LinePriceAfterDiscount + TAXAMOUNT);
object.parentNode.parentNode.querySelector("#GrossOutput").value = LINEPRICEGROSSAMOUNT.toFixed(2);
/******Calculate totals*******/
//net
var arr = document.getElementsByName('LinePriceAfterDiscount[]');
var tot = 0;
for (var i = 0; i < arr.length; i++) {
if (parseInt(arr[i].value))
tot += parseInt(arr[i].value);
}
document.getElementById('TotalNetAmount').value = tot;
//VAT
var arr = document.getElementsByName('TaxAmount[]');
var tot = 0;
for (var i = 0; i < arr.length; i++) {
if (parseInt(arr[i].value))
tot += parseInt(arr[i].value);
}
document.getElementById('TotalTaxAmount').value = tot;
//Gross
var NetTotal = document.getElementById('TotalNetAmount').value;
var TaxTotal = document.getElementById('TotalTaxAmount').value;
GrossTotal = (+NetTotal + +TaxTotal);
document.getElementById('TotalGrossAmount').value = GrossTotal;
}
/******Adding and removing rows******/
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for (var i = 0; i < colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
}
}
function deleteRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for (var i = 0; i < rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[1];
if (null != chkbox && true == chkbox.checked) {
if (rowCount <= 1) { // limit the user from removing all the fields
alert("Cannot Remove all of the items!.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
}
</script>
</head>
<body>
<form name="CalculationTesting">
<p>
<input type="button" value="Add Item" onClick="addRow('dataTable')" />
<input type="button" value="Remove Selected Item" onClick="deleteRow('dataTable')" />
</p>
<thead>
<tr>
<th>Qty 1|||</th>
<th>Line Price Net 2|||</th>
<th>Line Price Discount% 3|||</th>
<th>Line Price Discount Amount 4|||</th>
<th>Line Price With Discount 5|||</th>
<th>VAT Rate Amount 6|||</th>
<th>VAT Amount 7|||</th>
<th>Line Price Gross-OUTPUT 8|||</th>
</tr>
</thead>
<!-- start -->
<table id="dataTable" border="1" width="600" height="50" cellpadding="10" cellspacing="3">
<tr>
<td>
<input type="checkbox" required="required" name="chk[]" checked="checked" /></td>
</td>
<td>
<input type="number" name="Qty[]" id="Qty" step="1" onblur="this.value = parseFloat(Math.round(this.value * 100) / 100).toFixed(2);" onchange="calculate(this);" />
</td>
<td>
<input type="number" name="LinePriceNet[]" step="0.01" id="LinePriceNet" onblur="this.value = parseFloat(Math.round(this.value * 100) / 100).toFixed(2);" onchange="calculate(this);" />
</td>
<td>
<select type="number" name="LinePriceDiscount" id="LinePriceDiscountInput" onchange="calculate(this);" />
<option value="0.00">None</option>
<option value="0.01">1%</option>
<option value="0.02">2%</option>
<option value="0.03">3%</option>
<option value="0.04">4%</option>
<option value="0.05">5%</option>
<option value="0.06">6%</option>
<option value="0.07">7%</option>
<option value="0.08">8%</option>
<option value="0.09">9%</option>
<option value="0.10">10%</option>
</select>
</td>
<td>
<input readonly="readonly" type="number" name="LinePriceDiscountAmount[]" id="LinePriceDiscountAmount">
</td>
<td>
<input readonly="readonly" type="number" name="LinePriceAfterDiscount[]" id="LinePriceAfterDiscount">
</td>
<td>
<select type="number" name="TaxRate" id="TaxRate" onchange="calculate(this);" />
<option value="0.00">Zero Rate</option>
<option value="0.20">Standard(20%)</option>
<option value="0.00">Exempt</option>
<option value="0.05">Reduced Rate</option>
<option value="0.00">Outside The Scope</option>
</select>
</td>
<td>
<input readonly="readonly" type="number" name="TaxAmount[]" id="TaxAmount">
</td>
<td>
<input readonly="readonly" type="number" name="GrossOutput[]" id="GrossOutput">
</td>
</tr>
</table>
<table>
<tr>
<td><label>Net Amount</label>
<input readonly="readonly" type="number" name="TotalNetAmount[]" id="TotalNetAmount">
</td>
</tr>
<tr>
<td><label>VAT Amount</label>
<input readonly="readonly" type="number" name="TotalTaxAmount[]" id="TotalTaxAmount">
</td>
</tr>
<tr>
<td><label>Gross Amount</label>
<input readonly="readonly" type="number" name="TotalGrossAmount[]" id="TotalGrossAmount">
</td>
</tr>
</table>
</form>
</body>
</html>

How to determine how many years (D/M/Y) left from the Birthday to a certain age in age calculator?

What should I need to change to determine how many years (D/M/Y) left from the Birthday to a certain age? i.e my birthday is 01.01.1990 and and today my age is 27 Years, 5 month.... and I will 50 years old in 2040.
I want to know How many years left (DD/M/Y) from today to become 50 years old?
Another thing is Concern title should be just above the result not left side of the result.
Code below for this script and and two picture regarding this..
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>
function wr_document()
{
var w=new Date();
var s_d=w.getDate();
var s_m=w.getMonth()+1;
var s_y=w.getFullYear();
document.cir.len11.value=s_d;
document.cir.len12.value=s_m;
document.cir.len13.value=s_y;
}
function isNum(arg)
{
var args = arg;
if (args == "" || args == null || args.length == 0)
{
return false;
}
args = args.toString();
for (var i = 0; i<args.length; i++)
{
if ((args.substring(i,i+1) < "0" || args.substring(i, i+1) > "9") && args.substring(i, i+1) != ".")
{
return false;
}
}
return true;
}
function checkday(aa)
{
var val = aa.value;
var valc = val.substring(0,1);
if(val.length>0 && val.length<3)
{
if(!isNum(val) || val == 0)
{
aa.value="";
}
else if( val < 1 || val > 31)
{
aa.value=valc;
}
}
else if(val.length>2)
{
val = val.substring(0, 2);
aa.value=val;
}
}
function checkmon(aa)
{
var val = aa.value;
var valc = val.substring(0,1);
if(val.length>0 && val.length<3)
{
if(!isNum(val) || val == 0)
{
aa.value="";
}
else if(val < 1 || val > 12)
{
aa.value=valc;
}
}
else if(val.length>2)
{
val = val.substring(0, 2);
aa.value=val;
}
}
function checkyear(aa)
{
var val = aa.value;
var valc = val.substring(0,(val.length-1));
if(val.length>0 && val.length<7)
{
if(!isNum(val) || val == 0)
{
aa.value=valc;
}
else if(val < 1 || val>275759)
{
aa.value="";
}
}
else if(val.length>4)
{
aa.value=valc;
}
}
function checkleapyear(datea)
{
if(datea.getYear()%4 == 0)
{
if(datea.getYear()% 10 != 0)
{
return true;
}
else
{
if(datea.getYear()% 400 == 0)
return true;
else
return false;
}
}
return false;
}
function DaysInMonth(Y, M) {
with (new Date(Y, M, 1, 12)) {
setDate(0);
return getDate();
}
}
function datediff(date1, date2) {
var y1 = date1.getFullYear(), m1 = date1.getMonth(), d1 = date1.getDate(),
y2 = date2.getFullYear(), m2 = date2.getMonth(), d2 = date2.getDate();
if (d1 < d2) {
m1--;
d1 += DaysInMonth(y2, m2);
}
if (m1 < m2) {
y1--;
m1 += 12;
}
return [y1 - y2, m1 - m2, d1 - d2];
}
function calage()
{
var curday = document.cir.len11.value;
var curmon = document.cir.len12.value;
var curyear = document.cir.len13.value;
var calday = document.cir.len21.value;
var calmon = document.cir.len22.value;
var calyear = document.cir.len23.value;
if(curday == "" || curmon=="" || curyear=="" || calday=="" || calmon=="" || calyear=="")
{
alert("Please fill all the values and click 'Go'");
}
else if(curday == calday && curmon==calmon && curyear==calyear)
{
alert("Today your birthday & Your age is 0 years old")
}
else
{
var curd = new Date(curyear,curmon-1,curday);
var cald = new Date(calyear,calmon-1,calday);
var diff = Date.UTC(curyear,curmon,curday,0,0,0)
- Date.UTC(calyear,calmon,calday,0,0,0);
var dife = datediff(curd,cald);
document.cir.val.value=dife[0]+" years, "+dife[1]+" months, and "+dife[2]+" days";
var secleft = diff/1000/60;
document.cir.val3.value=secleft+" minutes since your birth";
var hrsleft = secleft/60;
document.cir.val2.value=hrsleft+" hours since your birth";
var daysleft = hrsleft/24;
document.cir.val1.value=daysleft+" days since your birth";
//alert(""+parseInt(calyear)+"--"+dife[0]+"--"+1);
var as = parseInt(calyear)+dife[0]+1;
var diff = Date.UTC(as,calmon,calday,0,0,0)
- Date.UTC(curyear,curmon,curday,0,0,0);
var datee = diff/1000/60/60/24;
document.cir.val4.value=datee+" days left for your next birthday";
}
}
function color(test)
{
for(var j=7; j<12; j++)
{
var myI=document.getElementsByTagName("input").item(j);
//myI.setAttribute("style",ch);
myI.style.backgroundColor=test;
}
}
function color1(test)
{
var myI=document.getElementsByTagName("table").item(0);
//myI.setAttribute("style",ch);
myI.style.backgroundColor=test;
}
</script>
<style media="screen" type="text/css">
.cal-container {
width: 540px;
margin: 10px auto 0;
}
#age-calculator {
background: none repeat scroll 0 0 #DDDDDD;
border: 1px solid #BEBEBE;
padding-left: 20px;
}
.calc {
border-color: #AAAAAA #999999 #929292 #AAAAAA;
border-style: solid;
border-width: 1px 2px 2px 1px;
padding: 2px 30px 3px;
height: 27px;
}
.calc:active {
border-color: #AAAAAA #999999 #929292 #AAAAAA;
border-style: solid;
border-width: 1px;
}
</style>
<title>Age calculator</title>
</head>
<body onLoad="wr_document()">
<div class="cal-container">
<div id="calculator-container">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td valign="top">
<h1 style="padding-top: 10px;">Age Calculator</h1>
<div class="descalign">
<span>Calculate your age in days, years, minutes, seconds. Know how many days are left for your next birthday.</span><br/><br/>
</div>
<div id="age-calculator">
<table width="100%" cellspacing="4" cellpadding="0" border="0" bgcolor="">
<tbody>
<tr>
<td colspan="2">
<table class="result" width="100%" height="100%">
<tbody>
<tr>
<td>
<form name="cir">
<table cellspacing="0" cellpadding="3">
<tbody>
<tr>
<td colspan="2">
<br>
Today's Date is:
</td>
</tr>
<tr>
<td align="center" colspan="2">
Date -
<input class="innerc resform" type="text" value="" onkeyup="checkday(this)" size="2" name="len11">
Month -
<input class="innerc resform" type="text" value="" onkeyup="checkmon(this)" size="2" name="len12">
Year -
<input class="innerc resform" type="text" value="" onkeyup="checkyear(this)" size="4" name="len13">
<br>
<br>
</td>
</tr>
<tr>
<td colspan="2"> Enter Your Date of Birth : </td>
</tr>
<tr>
<td align="center" colspan="2">
Date -
<input class="innerc resform" type="text" onkeyup="checkday(this)" size="2" name="len21">
Month -
<input class="innerc resform" type="text" onkeyup="checkmon(this)" size="2" name="len22">
Year -
<input class="innerc resform" type="text" onkeyup="checkyear(this)" size="4" name="len23">
<br>
<br>
<input class="calc" type="button" onclick="calage()" value=" Go " name="but">
<br>
<br>
</td>
</tr>
<tr>
<td class="form" width="30%" align="center">
<b> </b>
</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td>
<b> Your Age is </b>
</td>
<td>
<input class="resform" type="text" readonly="" size="36" name="val">
</td>
</tr>
<tr>
<td>
<b> Your Age in Days </b>
</td>
<td>
<input class="resform" type="text" readonly="" size="36" name="val1">
</td>
</tr>
<tr>
<td>
<b> Your Age in Hours </b>
</td>
<td>
<input class="resform" type="text" readonly="" size="36" name="val2">
(Approximate)
</td>
</tr>
<tr>
<td class="form">
<b> Your Age in Minutes </b>
</td>
<td>
<input class="resform" type="text" readonly="" size="36" name="val3">
(Approximate)
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>
<b> Your Next Birthday</b>
</td>
<td>
<input class="innerc resform" type="text" readonly="" size="36" name="val4">
</td>
</tr>
</tbody>
</table>
</form>
</td>
</tr>
</tbody>
</table>
<br>
</td>
<td> </td>
</tr>
<tr>
<td align="right" colspan="2"> </td>
<td> </td>
</tr>
</tbody>
</table>
</div>
<br>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>

There's a number of ways to achieve what you're asking.
For the formatting, you could define CSS rules for the table to be something like:
width: 100%;
text-align: center;
For the time until the 50th birthday, you could add 50 years in ms to the birth date and calculate accordingly, however you might need to be aware of the following in your calculations:
https://en.wikipedia.org/wiki/Year_2038_problem

How to stop reflecting values on table column filed values?

I am working with jQuery table with some calculations and with results it gave me some warning messages and i want that if there is any warning message of right side of any row of the table then it should just show me the value "BULK" below table under id="result" and that should not reflect with another values of table.
here is the site link : http://sea.studioscue.in/test.php
<script type="text/javascript">
$(function () {
$('.pnm, .price, .subtot, .widtot, .perm, .tottot, .vol, .tot, .vols, .heights, .acts, .heitot').prop('readonly', true);
var $tblrows = $("#tblProducts tbody tr");
$tblrows.each(function (index) {
var $tblrow = $(this);
$tblrow.find('.width, .height, .carton, .perm, .act').on('change', function () {
var carton = $tblrow.find("[name=carton][type=number][min=0]").val();
var height = $tblrow.find("[name=height][type=number][min=0]").val();
var width = $tblrow.find("[name=width][type=number][min=0]").val();
var act = $tblrow.find("[name=act][type=number][min=0]").val();
var perm = $tblrow.find("[name=perm]").val();
var subTotal = parseFloat(height*0.01, 10) * parseInt(carton, 10);
var cartons =parseInt(carton, 10);
if (!isNaN(cartons)) {
$tblrow.find('.carton').val(cartons.toFixed(0));
var cartonTotal = 0;
$(".carton").each(function () {
var stval = parseInt($(this).val());
cartonTotal += isNaN(stval) ? 0 : stval;
});
$('.cartontot').val(cartonTotal.toFixed(0));
}
if (!isNaN(subTotal)) {
$tblrow.find('.perm').val(subTotal.toFixed(5));
var grandTotal = 0;
$(".perm").each(function () {
var stval = parseFloat($(this).val());
grandTotal += isNaN(stval) ? 0 : stval;
});
$('.grdtot').val(grandTotal.toFixed(5));
}
$('.grdtot').val(grandTotal.toFixed(5));
var length = $(this).val();
var lngthOnly = ($(this).attr('class') == 'length') ? length : false;
var width = $(this).val();
var wdthOnly = ($(this).attr('class') == 'width') ? width : false;
var height = $(this).val();
var hightOnly = ($(this).attr('class') == 'height') ? height : false;
var carton = $(this).val();
var cartonOnly = ($(this).attr('class') == 'carton') ? carton : false;
var act = $(this).val();
var actOnly = ($(this).attr('class') == 'act') ? act : false;
if (grandTotal > 7 && lngthOnly < 590 && lngthOnly < 1201 && wdthOnly < 235 && hightOnly < 238 && hightOnly < 269) {
$('#result').html('FCL');
} else if (grandTotal < 7 && lngthOnly < 590 && lngthOnly < 1201 && wdthOnly < 235 && hightOnly < 238 && hightOnly < 269) {
$('#result').html('LCL');
}
else if ((grandTotal < 7 || grandTotal > 7) && (lngthOnly > 590 || lngthOnly > 1201 || wdthOnly > 235 || hightOnly > 238))
{
$('#result').html('BULK');
}
var height = $(this).val();
var hightOnly = ($(this).attr('class') == 'height') ? height : false;
var subCalc = parseFloat(height);
if (!isNaN(subCalc)) {
$tblrow.find('.calcheight').val(subCalc.toFixed(5));
var calcTotal = 0;
$(".calcheight").each(function () {
var stval = parseFloat($(this).val());
calcTotal += isNaN(stval) ? 0 : stval;
});
$('.heitot').val(calcTotal.toFixed(5));
}
var sp = subCalc;
hightOnly = parseFloat(hightOnly);
if(hightOnly > 238 && hightOnly < 269) {
$(this).closest('tr').find('td.error').text("Cargo won't fit in 20STD and 40STD Containers, change the mode to bulk");
} else if(hightOnly > 269){
$(this).closest('tr').find('td.error').text("Cargo won't fit in 20STD, 40STD and 40HC Containers, change the mode to bulk");
} else if(hightOnly < 269) {
$(this).closest('tr').find('td.error').text('');
}
var width = $(this).val();
var wdthOnly = ($(this).attr('class') == 'width') ? width : false;
var subCalcwidth = parseFloat(width);
if (!isNaN(subCalcwidth)) {
$tblrow.find('.calcwidth').val(subCalcwidth.toFixed(5));
var calcwidthTotal = 0;
$(".calcwidth").each(function () {
var stval = parseFloat($(this).val());
calcwidthTotal += isNaN(stval) ? 0 : stval;
});
$('.widtot').val(calcwidthTotal.toFixed(5));
}
var spwidth = subCalcwidth;
wdthOnly = parseFloat(wdthOnly);
if (wdthOnly > 235) {
$(this).closest('tr').find('td.errorwidth').text("Cargo won't fit in 20STD, 40STD and 40HC Containers, change the mode to bulk");
} else if (wdthOnly < 235) {
$(this).closest('tr').find('td.errorwidth').text('');
}
});
});
});
</script>
<table id="tblProducts">
<thead>
<tr>
<td><strong>Packages</strong></td>
<td><strong>Cartons</strong></td>
<td><strong>Cm Width</strong></td>
<td><strong>Cm Height</strong></td>
<td><strong>Act Kilos</strong></td>
<td><strong>M3</strong></td>
<td><strong>Warning Messages</strong></td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" class="pnm" value="Product One" name="pnm" style="width:120px" /></td>
<td ><input type="number" oninput="validity.valid||(value='');" class="carton" value="0" name="carton" min="0" maxlength="5" style="width:70px"></td>
<td><input type="number" onKeyPress="return AllowOnlyNumbers(event);" oninput="validity.valid||(value='');" class="width" value="0" min="0" name="width" maxlength="5" style="width:110px"/></td>
<td><input type="number" oninput="validity.valid||(value='');" class="height" value="0" min="0" name="height" maxlength="5" style="width:110px"/></td>
<td><input type="number" onKeyPress="return AllowOnlyNumbers(event);" oninput="validity.valid||(value='');" class="act" value="0" min="0" name="act" maxlength="5" style="width:90px"/></td>
<td><input type="number" class="perm" value="" name="perm" style="width:80px"/></td>
<td class="error" style="color:red"></td> <td class="errorwidth" style="color:red"></td>
</tr>
<tr>
<td><input type="text" class="pnm" value="Product Second" name="pnm" style="width:120px" /></td>
<td ><input type="number" oninput="validity.valid||(value='');" class="carton" value="0" name="carton" min="0" maxlength="5" style="width:70px"></td>
<td><input type="number" onKeyPress="return AllowOnlyNumbers(event);" oninput="validity.valid||(value='');" class="width" value="0" min="0" name="width" maxlength="5" style="width:110px"/></td>
<td><input type="number" oninput="validity.valid||(value='');" class="height" value="0" min="0" name="height" maxlength="5" style="width:110px"/></td>
<td><input type="number" onKeyPress="return AllowOnlyNumbers(event);" oninput="validity.valid||(value='');" class="act" value="0" min="0" name="act" maxlength="5" style="width:90px"/></td>
<td><input type="number" class="perm" value="" name="perm" style="width:80px"/></td>
<td class="error" style="color:red"></td><td class="errorwidth" style="color:red"></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td><input type="number" class="cartontot" value="" name="" style="width:70px" readonly/></td>
<td></td>
<td></td>
<td></td>
<td><input type="number" class="grdtot" value="" name="" style="width:80px" readonly/></td>
</tr>
</tfoot>
Regards
Ankit