Develop Reference

Why does the total from last row is not calculating the sum?

I am doing a project that involves making an estimate and adding up does results. I am using the method GET and using some of the the info from the url. Also i am using WordPress to build the Web Page. Problem is that sum of the TOTAL column is not working and showing in the TOTAL row that i made. Is not an error but i think I need to add one more piece of code or change something in the javascript. So why does the id:"total" not showing the sum of the whole column? is the total.value wrong? does the id:"system_total" have a problem?
Here is how the HTML looks like:
<form >
<h2>Cotizacion</h2>
<table class="Cotization">
<tbody>
<tr>
<th style="width:25%;font-size:16px;text-align:center;">Description</th>
<th style="width:15%;" class="qtyhd" title="qtytt">Qty</th>
<th style="width:15%;" class="ratehd" title="ratett">Rate</th>
<th style="width:15%;" class="tlhd" title="totaltt">Total</th>
</tr>
<tr>
<td>PV Grid Tied System</td>
<td> <input id="system_qty" name="system_qty" value="1" type="number" /></td>
<td> <input id="system_rate" name="system_rate" value="0" type="number" /></td>
<td> <output id="system_total"> </output></td>
</tr>
<tr>
<td>Solar Modules 250w</td>
<td> <input id="modules_qty" name="modules_qty" value="0" type="number" /></td>
<td> <input id="modules_rate" name="modules_rate" value="0" type="number" /></td>
<td> <output id="modules_total"> </output></td>
</tr>
<tr>
<td>Inverter</td>
<td> <input id="inverter_qty" name="inverter_qty" value="1" type="number" /></td>
<td> <input id="inverter_rate" name="inverter_rate" value="0" type="number" /></td>
<td> <output id="inverter_total"> </output></td>
</tr>
<tr>
<td>Aluminum Fames</td>
<td> <input id="aluminum_qty" name="aluminum_qty" value="0" type="number" /></td>
<td> <input id="aluminum_rate" name="aluminum_rate" value="0" type="number" /></td>
<td> <output id="aluminum_total"> </output></td>
</tr>
<tr>
<td>Service Disconnect</td>
<td> <input id="servicedt_qty" name="servicedt_qty" value="1" type="number" /></td>
<td> <input id="servicedt_rate" name="servicedt_rate" value="0" type="number" /></td>
<td> <output id="servicedt_total"> </output></td>
</tr>
<tr>
<td>Installation</td>
<td> <input id="installation_qty" name="installation_qty" value="1" type="number" /></td>
<td> <input id="installation_rate" name="installation_rate" value="0" type="number" /></td>
<td> <output id="installation_total"> </output></td>
</tr>
<tr>
<td>Down Payment</td>
<td> <input id="dnpayment_qty" name="dnpayment_qty" value="-1" type="number" /></td>
<td> <input id="dnpayment_rate" name="dnpayment_rate" value="0" type="number" /></td>
<td> <output id="dnpayment_total"> </output></td>
</tr>
<tr>
<td>Total </td>
<td> </td>
<td> </td>
<td> <input id="total" name="total"/></td>
</tr>
</tbody>
</table>
</form>
And here is the javascript that might have the problem:
<script>
document.addEventListener('DOMContentLoaded', function () {
var system_size = Number(getParameterByName('system_size'));
var system_rate_input = document.getElementById('system_rate');
var modules_qty = document.getElementById('modules_qty');
var aluminum_qty = document.getElementById('aluminum_qty');
var systemTotal = Number(document.getElementById('system_total').innerText);
var moduleTotal = Number(document.getElementById('modules_total').innerText);
var inverterTotal = Number(document.getElementById('inverter_total').innerText);
var aluminumTotal = Number(document.getElementById('aluminum_total').innerText);
var servicedtTotal = Number(document.getElementById('servicedt_total').innerText);
var installationTotal = Number(document.getElementById('installation_total').innerText);
var dnpaymentTotal = Number(document.getElementById('dnpayment_total').innerText);
var total = document.getElementById('total');
modules_qty.value = Number(system_size) * 4;
aluminum_qty.value = Number(modules_qty.value);
system_rate_input.value = 2.9 * 1000 * 1.2 * system_size;
updateSystemTotal()
updateModulesTotal()
updateInverterTotal()
updateAluminumTotal()
updateServiceTotal()
updateInstallationTotal()
updateDownPaymentTotal()
total.value = Number(systemTotal) + Number(moduleTotal) + Number(inverterTotal) + Number(aluminumTotal) + Number(servicedtTotal) + Number(installationTotal) + Number(dnpaymentTotal);
})
// FIRST ROW
function updateSystemTotal() {
var output = document.getElementById('system_total');
var quantity = Number(document.getElementById('system_qty').value);
var system_rate = Number(document.getElementById('system_rate').value);
output.innerText = quantity * system_rate;
}
document.getElementById('system_rate').addEventListener('change', updateSystemTotal)
document.getElementById('system_qty').addEventListener('change', updateSystemTotal)
// Second ROW
function updateModulesTotal() {
var output = document.getElementById('modules_total');
var quantity = Number(document.getElementById('modules_qty').value);
var modules_rate = Number(document.getElementById('modules_rate').value);
output.innerText = quantity * modules_rate;
}
document.getElementById('modules_rate').addEventListener('change', updateModulesTotal)
document.getElementById('modules_qty').addEventListener('change', updateModulesTotal)
// Third ROW
function updateInverterTotal() {
var output = document.getElementById('inverter_total');
var quantity = Number(document.getElementById('inverter_qty').value);
var inverter_rate = Number(document.getElementById('inverter_rate').value);
output.innerText = quantity * inverter_rate;
}
document.getElementById('inverter_rate').addEventListener('change', updateInverterTotal)
document.getElementById('inverter_qty').addEventListener('change', updateInverterTotal)
// Fourth ROW
function updateAluminumTotal() {
var output = document.getElementById('aluminum_total');
var quantity = Number(document.getElementById('aluminum_qty').value);
var aluminum_rate = Number(document.getElementById('aluminum_rate').value);
output.innerText = quantity * aluminum_rate;
}
document.getElementById('aluminum_rate').addEventListener('change', updateAluminumTotal)
document.getElementById('aluminum_qty').addEventListener('change', updateAluminumTotal)
// Fith ROW
function updateServiceTotal() {
var output = document.getElementById('servicedt_total');
var quantity = Number(document.getElementById('servicedt_qty').value);
var servicedt_rate = Number(document.getElementById('servicedt_rate').value);
output.innerText = quantity * servicedt_rate;
}
document.getElementById('servicedt_rate').addEventListener('change', updateServiceTotal)
document.getElementById('servicedt_qty').addEventListener('change', updateServiceTotal)
// Six ROW
function updateInstallationTotal() {
var output = document.getElementById('installation_total');
var quantity = Number(document.getElementById('installation_qty').value);
var installation_rate = Number(document.getElementById('installation_rate').value);
output.innerText = quantity * installation_rate;
}
document.getElementById('installation_rate').addEventListener('change', updateInstallationTotal)
document.getElementById('installation_qty').addEventListener('change', updateInstallationTotal)
//Seventh ROW
function updateDownPaymentTotal() {
var output = document.getElementById('dnpayment_total');
var quantity = Number(document.getElementById('dnpayment_qty').value);
var dnpayment_rate = Number(document.getElementById('dnpayment_rate').value);
output.innerText = quantity * dtpayment_rate;
}
document.getElementById('dnpayment_rate').addEventListener('change', updateDownPaymentTotal)
document.getElementById('dnpayment_qty').addEventListener('change', updateDownPaymentTotal)
// DON't TOUCH ANYTHING BELOW THIS POINT!!!
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
</script>

var systemTotal = Number(document.getElementById('system').innerText);
There is no element called "system" in the snippets you provided. Are you sure you don't need to get the value from "system_total"?
Edit:
Total is showing 0 at the beginning, because the subtotals aren't initialized. To fix this, you can use your update functions before calculating the total.
document.addEventListener('DOMContentLoaded', function () {
var system_size = Number(getParameterByName('system_size'));
var system_rate_input = document.getElementById('system_rate');
var modules_qty = document.getElementById('modules_qty');
var aluminum_qty = document.getElementById('aluminum_qty');
var total = document.getElementById('total');
modules_qty.value = Number(system_size) * 4;
aluminum_qty.value = Number(modules_qty.value);
system_rate_input.value = 2.9 * 1000 * 1.2 * system_size;
updateSystemTotal();
updateModulesTotal();
updateInverterTotal();
updateAluminumTotal();
updateServiceTotal();
updateInstallationTotal();
updateDownPaymentTotal();
updateTotal();
})
function updateTotal() {
var total = document.getElementById('total');
var systemTotal = Number(document.getElementById('system_total').innerText);
var moduleTotal = Number(document.getElementById('modules_total').innerText);
var inverterTotal = Number(document.getElementById('inverter_total').innerText);
var aluminumTotal = Number(document.getElementById('aluminum_total').innerText);
var servicedtTotal = Number(document.getElementById('servicedt_total').innerText);
var installationTotal = Number(document.getElementById('installation_total').innerText);
var dnpaymentTotal = Number(document.getElementById('dnpayment_total').innerText);
total.value = Number(systemTotal) + Number(moduleTotal) + Number(inverterTotal) + Number(aluminumTotal) + Number(servicedtTotal) + Number(installationTotal) + Number(dnpaymentTotal);
}
Further, you are updating the subtotals as soon as the user edits Quantities or Rates, but you are not updating the "Total" value.
You could call updateTotal() in your own update functions to solve this issue:
function updateSystemTotal() {
var output = document.getElementById('system_total');
var quantity = Number(document.getElementById('system_qty').value);
var system_rate = Number(document.getElementById('system_rate').value);
output.innerText = quantity * system_rate;
updateTotal();
}

Copy my code and Run it :
javascript(1.js) :
function rr() {
var system_size = document.getElementById('system_qty').value;
var system_rate_input = document.getElementById('system_rate').value;
var modules_qty = document.getElementById('modules_qty').value;
var modules_rate = document.getElementById('modules_rate').value;
var inverter_qty = document.getElementById('inverter_qty').value;
var inverter_rate = document.getElementById('inverter_rate').value;
var aluminum_qty = document.getElementById('aluminum_qty').value;
var aluminum_rate = document.getElementById('aluminum_rate').value;
var servicedt_qty = document.getElementById('servicedt_qty').value;
var servicedt_rate = document.getElementById('servicedt_rate').value;
var installation_qty = document.getElementById('installation_qty').value;
var installation_rate = document.getElementById('installation_rate').value;
var dnpayment_qty = document.getElementById('dnpayment_qty').value;
var dnpayment_rate = document.getElementById('dnpayment_rate').value;
var systemTotal = system_size * system_rate_input;
document.getElementById('system_total').innerHTML = systemTotal;
var moduleTotal = modules_rate * modules_qty;
document.getElementById('modules_total').innerHTML = moduleTotal;
var inverterTotal = inverter_qty * inverter_rate;
document.getElementById('inverter_total').innerHTML = inverterTotal;
var aluminumTotal =aluminum_qty * aluminum_rate;
document.getElementById('aluminum_total').innerHTML = aluminumTotal;
var servicedtTotal = servicedt_qty * servicedt_rate;
document.getElementById('servicedt_total').innerHTML = servicedtTotal;
var installationTotal = installation_qty * installation_rate;
document.getElementById('installation_total').innerHTML = installationTotal;
var dnpaymentTotal = dnpayment_qty * dnpayment_rate;
document.getElementById('dnpayment_total').innerHTML = dnpaymentTotal;
var Total = document.getElementById('total');
aluminum_qty = system_size * 4;
system_rate_input = 2.9 * 1000 * 1.2 * system_size;
Total.value = systemTotal + moduleTotal + inverterTotal+ aluminumTotal + servicedtTotal+ installationTotal + dnpaymentTotal;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src="1.js"></script>
<form name="frm" >
<h2>Cotizacion</h2>
<table class="Cotization">
<tbody>
<tr>
<th style="width:25%;font-size:16px;text-align:center;">Description</th>
<th style="width:15%;" class="qtyhd" title="qtytt">Qty</th>
<th style="width:15%;" class="ratehd" title="ratett">Rate</th>
<th style="width:15%;" class="tlhd" title="totaltt">Total</th>
</tr>
<tr>
<td>PV Grid Tied System</td>
<td> <input id="system_qty" name="system_qty" value="1" type="number" /></td>
<td> <input id="system_rate" name="system_rate" value="0" type="number" /></td>
<td> <output id="system_total"> </output></td>
</tr>
<tr>
<td>Solar Modules 250w</td>
<td> <input id="modules_qty" name="modules_qty" value="0" type="number" /></td>
<td> <input id="modules_rate" name="modules_rate" value="0" type="number" /></td>
<td> <output id="modules_total"> </output></td>
</tr>
<tr>
<td>Inverter</td>
<td> <input id="inverter_qty" name="inverter_qty" value="1" type="number" /></td>
<td> <input id="inverter_rate" name="inverter_rate" value="0" type="number" /></td>
<td> <output id="inverter_total"> </output></td>
</tr>
<tr>
<td>Aluminum Fames</td>
<td> <input id="aluminum_qty" name="aluminum_qty" value="0" type="number" /></td>
<td> <input id="aluminum_rate" name="aluminum_rate" value="0" type="number" /></td>
<td> <output id="aluminum_total"> </output></td>
</tr>
<tr>
<td>Service Disconnect</td>
<td> <input id="servicedt_qty" name="servicedt_qty" value="1" type="number" /></td>
<td> <input id="servicedt_rate" name="servicedt_rate" value="0" type="number" /></td>
<td> <output id="servicedt_total"> </output></td>
</tr>
<tr>
<td>Installation</td>
<td> <input id="installation_qty" name="installation_qty" value="1" type="number" /></td>
<td> <input id="installation_rate" name="installation_rate" value="0" type="number" /></td>
<td> <output id="installation_total"> </output></td>
</tr>
<tr>
<td>Down Payment</td>
<td> <input id="dnpayment_qty" name="dnpayment_qty" value="-1" type="number" /></td>
<td> <input id="dnpayment_rate" name="dnpayment_rate" value="0" type="number" /></td>
<td> <output id="dnpayment_total"> </output></td>
</tr>
<tr>
<td>Total </td>
<td> </td>
<td> </td>
<td> <input value="" id="total" name="total"/></td>
</tr>
</tbody>
</table>
</form>
<button id="btn" onclick="rr()">Click</button>
</body>
</html>

Using options from select tag as inputs for Javascript

So far I have written the following code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body background="Pics\Pattern.png">
<body>
<table style="width:10%">
<tr>
<th > <font family = "Verdana" color = #fff>Current Stat</font></th>
<th > <font family = "Verdana" color = #fff>Current Level</font></th>
<th > <font family = "Verdana" color = #fff> Base Stat</font></th>
<th > <font family = "Verdana" color = #fff> EV's In Stat</font></th>
<th > <font family = "Verdana" color = #fff> What Stat</font></th>
<th ><font family = "Verdana" color = #fff> Nature Is:</font></th>
</tr>
<tr>
<td class="mycell">
<input type = "text" style="width:133px" id = "C-Stat" />
</td>
<td class="mycell">
<input type = "text" style="width:133px" id = "C-Level" />
</td>
<td class="mycell">
<input type = "text" style="width:133px" id = "B-Stat" />
</td>
<td class="mycell">
<input type = "text" style="width:133px" id = "EV-Stat" />
</td>
<td class="mycell">
<style="width:133px" />
<select id = "What-Stat">
<option value="HP">HP</option>
<option value="Attack">Attack</option>
<option value="Defence">Defence</option>
<option value="Special Attack">Special Attack</option>
<option value="Special Defence">Special Defence</option>
<option value="Speed">Speed</option>
</select>
</td>
<td class="mycell">
<style="width:133px"/>
<select id = "Nature">
<option value="Beneficial">Beneficial</option>
<option value="Neutral">Neutral</option>
<option value="Detrimental">Detrimental</option>
</select>
</td>
</table>
<button onclick="IVFunction()">Get IV</button>
<p id="checkar"></p>
</body>
<script>
function IVFunction() {
var CS = parseInt(document.getElementById("C-Stat").value);
var CL = parseInt(document.getElementById("C-Level").value);
var BS = parseInt(document.getElementById("B-Stat").value);
var ES = parseInt(document.getElementById("EV-Stat").value);
var N = parseInt(document.getElementById("Nature").value);
var WS = parseInt(document.getElementById("What-Stat").value);
var done = "Please Enter A Valid Input";
if (N=="Beneficial") {
var N = 1.1;
}
else if (N=="Neutral") {
var N = 1.0;
}
else if (N=="Detrimental") {
var N = 0.9;
}
if (WS == "HP") {
var HPIV1 = ((CS-10)*100)/CL;
var HPIV2 = HPIV1 - (2*BS) - (ES/4) - 100;
var done = HPIV2;
}
else if (WS != "HP") {
var IV1 = ((CS/N - 5)*100)/CL;
var IV2 = IV1 - (2*BS) - (ES/4);
var done = IV2;
}
document.getElementById("checkar").innerHTML = done;
}
</script>
</html>
The code shows the user a table, and then takes both text and select box inputs to run a scripted code. What I want to fix in the code, is to do with the select options. In the script section I have outlined some conditions that will occur depending on what options the user selects as their input, however I am unsure how to actually use these values as inputs for the script code; specifically the section about setting N's value.
Any help would be much appreciated :)

You should not use parseInt() for N and WS, and there are many redefinition of variables in your code. What's more, put all your styles in css files.
function IVFunction() {
var CS = parseInt(document.getElementById("C-Stat").value);
var CL = parseInt(document.getElementById("C-Level").value);
var BS = parseInt(document.getElementById("B-Stat").value);
var ES = parseInt(document.getElementById("EV-Stat").value);
var N = document.getElementById("Nature").value;
var WS = document.getElementById("What-Stat").value;
var done = "Please Enter A Valid Input";
if (N == "Beneficial") {
N = 1.1;
} else if (N == "Neutral") {
N = 1.0;
} else if (N == "Detrimental") {
N = 0.9;
}
if (WS == "HP") {
var HPIV1 = ((CS - 10) * 100) / CL;
var HPIV2 = HPIV1 - (2 * BS) - (ES / 4) - 100;
done = HPIV2;
} else if (WS != "HP") {
var IV1 = ((CS / N - 5) * 100) / CL;
var IV2 = IV1 - (2 * BS) - (ES / 4);
done = IV2;
}
document.getElementById("checkar").innerHTML = done;
}
body {
font-family: "Verdana", serif;
background: url("..\Pics\Pattern.png");
}
th {
color: black;
}
td {
width: 133px
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<table>
<tr>
<th>Current Stat</th>
<th>Current Level</th>
<th>Base Stat</th>
<th>EV's In Stat</th>
<th>What Stat</th>
<th>Nature Is</th>
</tr>
<tr>
<td class="mycell">
<input type="text" id="C-Stat" />
</td>
<td class="mycell">
<input type="text" id="C-Level" />
</td>
<td class="mycell">
<input type="text" id="B-Stat" />
</td>
<td class="mycell">
<input type="text" id="EV-Stat" />
</td>
<td class="mycell">
<select id="What-Stat">
<option value="HP">HP</option>
<option value="Attack">Attack</option>
<option value="Defence">Defence</option>
<option value="Special Attack">Special Attack</option>
<option value="Special Defence">Special Defence</option>
<option value="Speed">Speed</option>
</select>
</td>
<td class="mycell">
<select id="Nature">
<option value="Beneficial">Beneficial</option>
<option value="Neutral">Neutral</option>
<option value="Detrimental">Detrimental</option>
</select>
</td>
</table>
<button onclick="IVFunction()">Get IV</button>
<p id="checkar"></p>
</body>

Your problem is these two lines:
var N = parseInt(document.getElementById("Nature").value);
var WS = parseInt(document.getElementById("What-Stat").value);
where you are trying to parse words into an integer.
Remove the parseInt() and you should be good to go:
function IVFunction() {
var CS = parseInt(document.getElementById("C-Stat").value);
var CL = parseInt(document.getElementById("C-Level").value);
var BS = parseInt(document.getElementById("B-Stat").value);
var ES = parseInt(document.getElementById("EV-Stat").value);
var N = document.getElementById("Nature").value;
var WS = document.getElementById("What-Stat").value;
var done = "Please Enter A Valid Input";
if (N == "Beneficial") {
var N = 1.1;
} else if (N == "Neutral") {
var N = 1.0;
} else if (N == "Detrimental") {
var N = 0.9;
}
if (WS == "HP") {
var HPIV1 = ((CS - 10) * 100) / CL;
var HPIV2 = HPIV1 - (2 * BS) - (ES / 4) - 100;
var done = HPIV2;
} else if (WS != "HP") {
var IV1 = ((CS / N - 5) * 100) / CL;
var IV2 = IV1 - (2 * BS) - (ES / 4);
var done = IV2;
}
document.getElementById("checkar").innerHTML = done;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body background="Pics\Pattern.png">
<body>
<table style="width:10%">
<tr>
<th> <font family="Verdana" color=# fff>Current Stat</font>
</th>
<th> <font family="Verdana" color=# fff>Current Level</font>
</th>
<th> <font family="Verdana" color=# fff> Base Stat</font>
</th>
<th> <font family="Verdana" color=# fff> EV's In Stat</font>
</th>
<th> <font family="Verdana" color=# fff> What Stat</font>
</th>
<th><font family="Verdana" color=# fff> Nature Is:</font>
</th>
</tr>
<tr>
<td class="mycell">
<input type="text" style="width:133px" id="C-Stat" />
</td>
<td class="mycell">
<input type="text" style="width:133px" id="C-Level" />
</td>
<td class="mycell">
<input type="text" style="width:133px" id="B-Stat" />
</td>
<td class="mycell">
<input type="text" style="width:133px" id="EV-Stat" />
</td>
<td class="mycell">
<style="width:133px" />
<select id="What-Stat">
<option value="HP">HP</option>
<option value="Attack">Attack</option>
<option value="Defence">Defence</option>
<option value="Special Attack">Special Attack</option>
<option value="Special Defence">Special Defence</option>
<option value="Speed">Speed</option>
</select>
</td>
<td class="mycell">
<style="width:133px" />
<select id="Nature">
<option value="Beneficial">Beneficial</option>
<option value="Neutral">Neutral</option>
<option value="Detrimental">Detrimental</option>
</select>
</td>
</table>
<button onclick="IVFunction()">Get IV</button>
<p id="checkar"></p>
</body>
</html>

Javascript - how to add array elements to the textbox field using next ad backward

I have list of array elements like {5000,10000,25000,50000,100000}
i want those elements should assign to the text field with buttons on click.Like as show in the image
the units value should change according to the click events.
Here is the sample code
<html>
<head>
<style>
td { width:33%; }
</style>
<script>
var counter = 0;
function upDate(){
counter++;
if (counter > 7){
counter = 0;
}
var description = new Array(7)
description[0] = "5000";
description[1] = "10000";
description[2] = "25000";
description[3] = "50000";
description[4] = "100000";
description[5] = "250000";
description[6] = "500000";
description[7] = "Unlimited";
document.myForm.units.value = description[counter];
}
var lenght = 0;
function upDateLength(){
lenght++;
if (lenght > 2){
lenght = 0;
}
var description = new Array(3)
description[0] = "30sec";
description[1] = "60sec";
description[2] = "unlimited";
document.myForm.length.value = description[lenght];
}
var utype = 0;
function upDateType(){
utype++;
if (utype > 2){
utype = 0;
}
var description = new Array(3)
description[0] = "Feature";
description[1] = "Background";
description[2] = "Theme";
document.myForm.utype.value = description[utype];
}
</script>
</head>
<body>
<form method="post" action="" name="myForm">
<table width="75%" align="center" border="1">
<tr>
<td colspan="3" align="center"><h2>License Requests</h2></td>
</tr>
<tr>
<td><input type="radio" name="type" value="vocal"><span>Vocal</span></td>
<td><input type="radio" name="type" value="inst"><span>Instrumental</span></td>
<td> </td>
</tr>
<tr>
<td>
<table><tr><td><img src="images/up.jpg" width="10px" onclick="upDate()"> Units</td></tr>
<tr><td><input type="text" name="units" value="" ></td></tr></table>
</td>
<td>
<table><tr><td><img src="images/up.jpg" width="10px" onclick="upDateLength()"> Length</td></tr>
<tr><td><input type="text" name="length" value="" ></td></tr></table>
</td>
<td>
<table><tr><td><img src="images/up.jpg" width="10px" onclick="upDateType()"> User Type</td></tr>
<tr><td><input type="text" name="utype" value="" ></td></tr></table>
</td>
</tr>
</table>
</form>
</body>
<html>

Form validation without error on IE

I have a html code saved as a php, the form validation works in google chrome but not in IE. In IE after I hit the submit button, the page automatically goes to process form regardless of errors.
This is my code:
<!DOCTYPE html>
<html>
<head>
<title>Week 8 Lab - JavaScript DOM and Arrays</title>
<meta charset="utf-8">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<script>
function validateForm() {
var errors = 0;
var fName = document.forms["orderForm"].firstName.value;//first name validation
if (fName == null || fName == "")
{
document.getElementById('firstNameError').innerHTML = "Please enter a first name.";
errors++;
} else {
document.getElementById('firstNameError').innerHTML = "";
}
//var lName = document.forms["orderForm"].lastName.value;//last name validation
if (lName == null || lName == "")
{
document.getElementById('lastNameError').innerHTML = "Please enter a last name.";
errors++;
} else {
document.getElementById('lastNameError').innerHTML = "";
}
//var address = document.forms["orderForm"].address.value;//address validation
if (address == null || address == "")
{
document.getElementById('addressError').innerHTML = "Please enter an address.";
errors++;
} else {
document.getElementById('addressError').innerHTML = "";
}
//var city = document.forms["orderForm"].city.value;//city validation
if (city == null || city == "")
{
document.getElementById('cityError').innerHTML = "Please enter a city.";
errors++;
} else {
document.getElementById('cityError').innerHTML = "";
}
//var pCodeCheck = /^[0-9a-zA-Z]+$/;//postal code validation
if (pCodeCheck)
{
document.getElementById('postalCoderror').innerHTML = "";
}
else
{
document.getElementById('postalCoderror').innerHTML = "Please enter a valid postal code.";
errors++;
}
// makes sure you cannot order a negative number of items
var itemQTY = document.forms["orderForm"].widget1qty.value;
if (itemQTY < 0)
{
document.getElementById('qtyError').innerHTML = "You cannot enter a negative number.";
errors++;
} else {
document.getElementById('qtyError').innerHTML = "";
}
var itemQTY2 = document.forms["orderForm"].widget2qty.value;
if (itemQTY2 < 0)
{
document.getElementById('qtyError2').innerHTML = "You cannot enter a negative number.";
errors++;
} else {
document.getElementById('qtyError2').innerHTML = "";
}
var itemQTY3 = document.forms["orderForm"].widget3qty.value;
if (itemQTY3 < 0)
{
document.getElementById('qtyError3').innerHTML = "You cannot enter a negative number.";
errors++;
} else {
document.getElementById('qtyError3').innerHTML = "";
}
//makes sure there is at least one item ordered
var wid1Qty = document.getElementById('widget1qty').value;
var wid2Qty = document.getElementById('widget2qty').value;
var wid3Qty = document.getElementById('widget3qty').value;
if (wid1Qty + wid2Qty + wid3Qty == 0)
{
document.getElementById('itemQTY').innerHTML = "You must order atleast one item.";
errors++;
} else {
document.getElementById('itemQTY').innerHTML = "";
}
var total1;
var total2;
var total3;
var total4;
total1 = document.forms['orderForm']['widget1qty'].value * 5;
total2 = document.forms['orderForm']['widget2qty'].value * 15;
total3 = document.forms['orderForm']['widget3qty'].value * 25;
total4 = (total1 + total2 + total3);
alert('Your total is: $' + total4 + '.00');
return errors;
}
function startValidate() {
var errors = validateForm();
if (errors == 0) {
document.forms['orderForm'].submit();
} else {
return false;
}
}
</script>
<div id="wrapper">
<h2 class="center">Order Form</h2> <!-- action="processForm.html" "javascript:void(0)" -->
<form name="orderForm" method="post" action="processForm.html" onsubmit="return startValidate()">
<fieldset>
<legend>Personal Information</legend>
<table>
<tr>
<th colspan="3"></th>
</tr>
<tr>
<td><span class="required">*</span>First Name:</td>
<td><input type="text" name="firstName" id="firstName" size="30"></td>
<td id="firstNameError"></td>
</tr>
<tr>
<td><span class="required">*</span>Last Name:</td>
<td><input type="text" name="lastName" id="lastName" size="30"></td>
<td id="lastNameError"></td>
</tr>
<tr>
<td><span class="required">*</span>Address:</td>
<td><input type="text" name="address" id="address" size="30"></td>
<td id="addressError"></td>
</tr>
<tr>
<td><span class="required">*</span>City:</td>
<td><input type="text" name="city" id="city" size="30"></td>
<td id="cityError"></td>
</tr>
<tr>
<td><span class="required">*</span>Province:</td>
<td><select name="province" id="province" size="1">
<option disabled>Select a province</option>
<option value="BC">British Columbia</option>
<option value="AB">Alberta</option>
<option value="SK">Saskatchewan</option>
<option value="MB">Manitoba</option>
<option value="ON">Ontario</option>
<option value="QC">Quebec</option>
<option value="NB">New Brunswick</option>
<option value="NS">Nova Scotia</option>
<option value="PE">Prince Edward Island</option>
<option value="NF">Newfoundland</option>
<option value="YK">Yukon</option>
<option value="NWT">Northwest Territories</option>
<option value="NU">Nunavut</option>
</select>
</td>
<td></td>
</tr>
<tr>
<td><span class="required">*</span>Postal Code:</td>
<td><input type="text" name="postalCode" id="postalCode" maxlength="6"></td>
<td id="postalCoderror"></td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Order Information</legend>
<table>
<tr>
<th colspan="3"></th>
</tr>
<tr>
<td rowspan="3">Select your products:<br>
<td>Widget #1
<input type="text" name="widget1qty" id="widget1qty" size="1" value="0">Qty # <strong>$5.00/ea</strong></td>
<td id="qtyError"></td>
</tr>
<tr>
<td>Widget #2
<input type="text" name="widget2qty" id="widget2qty" size="1" value="0">Qty # <strong>$15.00/ea</strong></td>
<td id="qtyError2"></td>
</tr>
<tr>
<td>Widget #3
<input type="text" name="widget3qty" id="widget3qty" size="1" value="0">Qty # <strong>$25.00/ea</strong></td>
<td id="qtyError3"></td>
</tr>
<tr>
<td rowspan="3"></td>
<td></td>
<td id="itemQTY"></td>
</tr>
<tr>
<td rowspan="3">Shipping Type:</td>
<td>Standard ($5.00)<input type="radio" name="shippingType" id="shippingTypeStandard" value="Standard" checked></td>
</tr>
<tr>
<td>Express ($10.00)<input type="radio" name="shippingType" id="shippingTypeExpress" value="Express"></td>
</tr>
<tr>
<td>Overnight ($20.00)<input type="radio" name="shippingType" id="shippingTypeOvernight" value="Overnight"></td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Submit Order</legend>
<table>
<tr>
<th colspan="2"></th>
</tr>
<tr>
<input type="submit" name="btnSubmit" id="btnSubmit" value="Submit Order">
<td><input type="reset" name="btnReset" id="btnReset" value="Reset Form"></td>
</tr>
</table>
</fieldset>
</form>
</div>
</body>

When you look at the console in IE’s developer tools (F12), you will see that there is an error message about undeclared variable lName. This causes the error checking to be aborted.
You have several lines like
//var lName = document.forms["orderForm"].lastName.value;//last name validation
Since // starts a comment in JavaScript, the line has no effect. The variable lName is not declared or defined elsewhere either.
So you need to remove those // comment starters. Note that the code does not work in Chrome either; you may have tested a different version in Chrome, or misinterpreted some behavior.
In the console, you can also see a message for line 237 about “unexpected identifier”. It is actually a serious HTML markup error; IE reports some of such errors, in a strange way. The error is that a tr element has an input element as child, which is forbidden in HTML syntax. This is why the Submit Order and Reset Form appear on top of each other and not on the same row as intended. (For usability, the Reset Form button should be removed, but I digress.)

Stuck on a simple calculation with JavaScript

I (total Javascript Noob) am trying to write a javascript to create a weight and balance calculator for general aviation aircraft.
However I am getting stuck along the way.
The user is supposed to enter weight information and the calculator should then calculate the airplanes Moment and or weight as well as sum up the corresponding fields.
Unfortunately I can't get the script to calculate the users inputs. Does anyone have a suggestion?
My HTML is: (JS further down below)
<form id="form" onsubmit="return false;">
<table>
<tr>
<th>Station</th>
<th>Weight</th>
<th></th>
<th>Arm</th>
<th></th>
<th>Moment</th>
<th></th>
</tr>
<tr>
<td>Empty Weight</td>
<td>
<script type="text/javascript">
document.write(weight);
</script>
</td>
<td>kg</td>
<td>
<script type="text/javascript">
document.write(acarm);
</script>
</td>
<td>kg-m</td>
<td>
<script type="text/javascript">
document.write(moment);
</script>
</td>
<td>m</td>
</tr>
<tr>
<td>Pilot</td>
<td>
<input type="text" value="0" onkeypress="return isNumberKey(event)" onblur="onBlur(this)" onfocus="onFocus(this)" id="Pilot" />
</td>
<td>kg</td>
<td>
<script type="text/javascript">
document.write(afseat);
</script>
</td>
<td>kg-m</td>
<td>
<script type="text/javascript">
document.write(pimom);
</script>
</td>
<td>m</td>
</tr>
<tr>
<td>CoPilot</td>
<td>
<input type="text" value="0" onkeypress="return isNumberKey(event)" onblur="onBlur(this)" onfocus="onFocus(this)" id="CoPilot" />
</td>
<td>kg</td>
<td>
<script type="text/javascript">
document.write(afseat);
</script>
</td>
<td>kg-m</td>
<td>
<script type="text/javascript">
document.write(cpmom);
</script>
</td>
<td>m</td>
</tr>
<tr>
<td>Pax 1</td>
<td>
<input type="text" value="0" onkeypress="return isNumberKey(event)" onblur="onBlur(this)" onfocus="onFocus(this)" id="Pax1" />
</td>
<td>kg</td>
<td>
<script type="text/javascript">
document.write(arseat);
</script>
</td>
<td>kg-m</td>
<td>
<script type="text/javascript">
document.write(p1mom);
</script>
</td>
<td>m</td>
</tr>
<tr>
<td>Pax 2</td>
<td>
<input type="text" value="0" onkeypress="return isNumberKey(event)" onblur="onBlur(this)" onfocus="onFocus(this)" id="Pax2" />
</td>
<td>kg</td>
<td>
<script type="text/javascript">
document.write(arseat);
</script>
</td>
<td>kg-m</td>
<td>
<script type="text/javascript">
document.write(p2mom);
</script>
</td>
<td>m</td>
</tr>
<tr>
<td>Fuel</td>
<td>
<input type="text" value="0" onkeypress="return isNumberKey(event)" onblur="onBlur(this)" onfocus="onFocus(this)" id="Fuel" />
</td>
<td>l</td>
<td>
<script type="text/javascript">
document.write(abag);
</script>
</td>
<td>kg-m</td>
<td>
<script type="text/javascript">
document.write(bamom);
</script>
</td>
<td>m</td>
</tr>
<tr>
<td>Baggage</td>
<td>
<input type="text" value="0" onkeypress="return isNumberKey(event)" onblur="onBlur(this)" onfocus="onFocus(this)" id="Baggage" />
</td>
<td>kg</td>
<td>
<script type="text/javascript">
document.write(abag);
</script>
</td>
<td>kg-m</td>
<td>
<script type="text/javascript">
document.write(bamom);
</script>
</td>
<td>m</td>
</tr>
<tr>
<td>Total</td>
<td>
<script type="text/javascript">
document.write(totweight);
</script>
</td>
<td>kg</td>
<td>
<script type="text/javascript">
document.write(totarm);
</script>
</td>
<td>kg-m</td>
<td>
<script type="text/javascript">
document.write(totmom);
</script>
</td>
<http://jsfiddle.net/#savetd>m</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" onclick="weightandbalance();" />
</td>
<td></td>
<td></td>
</tr>
</table>
And here is the JS:
// Basic Aircraft Set Up
var weight = 627.9; // Basic Empty Weight in kg
var moment = 201.22; // Moment in m-kg
var acarm = Math.round((moment / weight) * 10000) / 10000;
var mtow = 1002; // Maximum Take Off Weight in kg
var afseat = 0.41; // Front Seat Arm in m
var arseat = 1.19; // Rear Seat Arm in m
var abag = 1.9; // Baggage Area Arm in m
var afuel = 1.12; // Fuel Tank Arm in m
function weightandbalance() {
var Pilot = parseFloat(document.getElementById("Pilot").value);
var CoPilot = document.getElementById("CoPilot").value;
var Pax1 = document.getElementById("Pax1").value;
var Pax2 = document.getElementById("Pax2").value;
var Baggage = document.getElementById("Baggage").value;
var Fuel = document.getElementById("Fuel").value;
// Perform Calculations
var pimom = Pilot * afseat;
var cpmom = CoPilot.value * afseat;
var p1mom = Pax1.value * arseat;
var p2mom = Pax2.value * arseat;
var bamom = Baggage.value * abag;
var fumom = Fuel.value * afuel * 0.71;
var totweight = weight + Pilot + CoPilot + Pax1 + Pax2 + Baggage + Fuel;
var totmom = moment + pimom + cpmom + p1mom + p2mom + bamom + fumom;
var totarm = Math.round((totmom / weight) * 10000) / 10000;
}
// Allow only numbers
function isNumberKey(evt) {
var charCode = (evt.which) ? evt.which : event.keyCode;
if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) return false;
return true;
}
//Default Values
function onBlur(el) {
if (el.value == '') {
el.value = el.defaultValue;
}
}
function onFocus(el) {
if (el.value == el.defaultValue) {
el.value = '';
}
}

You may want to put a console.log() statement in your code somewhere and open the developer console for your browser to see what it prints out.
For example, put it after you calculate totweight or something:
var totweight = weight + Pilot + CoPilot + Pax1 + Pax2 + Baggage + Fuel;
console.log(totweight);
If you're using Chrome, you can open the console by pressing CtrlShiftJ (Windows) or CmdOptJ (Mac).
Another thing you may want to do is to do parseFloat() on your other variables like you did for the Pilot variable. You may be getting back strings instead of numbers in your code snippet here. So you could do something like this:
console.log(typeof CoPilot);
And see what the console prints out in the browser. If it prints out "string" instead of "number", you'll know to ParseFloat() those variables as well.
You can also do the following to check if CoPilot (or any other variable) is Not-A-Number:
console.log( isNan(CoPilot) );
I hope this helps.