Develop Reference

Field Update Javascript

When the menu is selected from the radio buttons, and the amount of guests, the total price should be updated. But couldn't find the issue in the code. It is not updating.
When menu is clicked AND Amount of guests => Total Price update.
var proceed = 0;
var myTea = "";
var chosenTea;
function getSelectedText(selectList) {
return selectList.options[selectList.selectedIndex].text;
}
function getRadioValue(radioArray) {
var i;
for (i = 0; i < radioArray.length; i++) {
if (radioArray[i].checked)
return radioArray[i].value;
}
return "";
}
function getSelectedValue(selectList) {
return selectList[selectList.selectedIndex].value;
}
function view(form) {
var termsconds = form.terms.value;
var tea = getRadioValue(form.teaChoice);
var nb_people = getSelectedText(form.size);
var multiplier = parseInt(getSelectedValue(form.size));
var allergies = form.allergies.value;
var champagne = form.champ.value;
var champText = "";
var special;
if (champagne = true) {
special = 10;
champText = "with champagne";
} else {
special = 0;
champText = "";
}
var teaprice;
if (tea !== null) {
teaprice = parseInt(tea)
} else {
teaprice = 0;
}
var totalprice;
var additional;
var totalOrder;
totalprice = (teaprice + special) * multiplier;
if (allergies !== null) {
additional = "allergies to: " + allergies;
} else {
additional = " no food allergy ";
}
form.price.value = totalprice;
if (proceed === 1) {
if (termsconds === false) {
alert("you must read the terms and conditions");
} else {
if (myTea === null) {
alert("You must choose tea before you can proceed with order");
proceed = 0;
} else {
totalOrder = "you have ordered a " + chosenTea + champText + "for " + nb_people + " and we have" +
"noted that you have " + additional + ".\nYour toal bill is \u00A3" + totalprice + ".\n";
confirm(totalOrder);
proceed = 0;
}
}
}
}
function displayTea(teaName) {
myTea = document.getElementById("chosenTea");
myTea.value = teaName;
chosenTea = teaName;
}
body {
color: #FFFFFF;
}
h1 {
font-family: "corsoiva", serif;
color: #005080;
font-size: 40px;
}
#myTable {
background-color: #50a0d0;
}
.myBlue {
color: #005080;
}
.myWhite {
background-color: #FFFFFF;
}
.toRight {
float: right;
text-align: right;
}
<center>
<h1>Welcome to Web Tech's Afternoon tea</h1>
<form>
<table border="5" cellpadding="10" cellspacing="5" id="myTable">
<tr>
<td colspan="2" align="center">
<h2>Please chosse from the menu below <br> and select the number of people </h2>
</td>
</tr>
<tr>
<td colspan="2" class="myWhite">
<span class="myBlue">Please select your menu:</span><br>
<input type="radio" name="teaChoice" value="20" onclick="displayTea('Easter AFternoon Tea');view(this.form)">
<input type="radio" name="teaChoice" value="30" onclick="displayTea('Pastries and specialist');view(this.form)">
<input type="radio" name="teaChoice" value="15" onclick="displayTea('Traditional Afternoon Tea');view(this.form)">
<br>
<span class="myBlue">Your tea: </span>
<input type="text" id="chosenTea" size="50">
</td>
</tr>
<tr>
<td colspan="2">
<div align="left">Please select party size and champagne option: <br><br>
<select name="size" onclick="view(this.form)">
<option value="1">1 guest </option>
<option value="2">2 guest </option>
<option value="3">3 guest </option>
<option value="4">4 guest </option>
</select>
<input type="checkbox" name="champ" value="champagne" onclick="view(this.form)">with champagne</div>
<div class="toRight">Please enter food allergies in the input field below: <br>
<input type="text" name="allergies" size="60"></div>
</td>
</tr>
<tr>
<td><b>Total price:$</b><input type="text" name="price" size="4"></td>
<td rowspan="2" align="center"><br><br>
<input type="button" name="proceedOrder" value="Proceed with order" onclick="view(this.form);return view(this.form)">
</td>
</tr>
<tr>
<td><input type="checkbox" name="terms " value="read"> I have read and accepted the <a href="Terms.html">terms and
conditions</a>
</td>
</tr>
</table>
</form>
</center>

There is a space in your HTML at name="terms ": remove it. Then form.terms will be valid in your code.
You could have spotted this if you would have checked the console for errors, as in your current version the following line:
var termsconds = form.terms.value;
... produces:
form.terms is undefined

Alert message won't work using jquery

I created a form with the code below. There is a problem that I am unable to solve. The problem is the alert message won't work when the submit button is clicked.
$(document).ready(function() {
$("#btn_id").click(function() {
var valid = validate();
var name_order = $("#name").val();
var address_order = $("#address").val();
var city_order = $("#city").val();
var state_order = $("#state").val();
var zipcode_order = $("#zipcode_id").val();
var phone_order = $("#phone_id").val();
var email_order = $("#emailid").val();
var randID_order = $("#generateID").val();
var ICCID_order = $("#ID").val();
if (valid) {
$("form[name='workorder']").submit();
alert(" Name :" + name_order + " \n Address : " + address_order +
" \n City : " + city_order + " \n State: " + state_order +
" \n Zipcode: " + zipcode_order + " \n Phone: " + phone +
" \n Email: " + email_order + " \n ID: " + randID_order +
" \n SIM Card: " + ICCID_order)
}
});
// Give Alert if field not enter
function validate() {
if (document.workorder.name.value == "") {
alert("Please provide your Name!")
document.workorder.name.focus();
return false;
}
if (document.workorder.address.value == "") {
alert("Please provide your Address!")
document.workorder.address.focus();
return false;
}
if (document.workorder.city.value == "") {
alert("Please provide your City!")
document.workorder.city.focus();
return false
}
if (document.workorder.state.value == "-1") {
alert("Please select your State!")
document.workorder.state.focus();
return false
}
if (document.workorder.zipcode.value == " ") {
alert("Please provide your Zipcode!")
document.workorder.zipcode.focus();
return false;
}
if (document.workorder.phone.value == " ") {
alert("Please provide your Phone!")
document.workorder.zipcode.focus();
return false;
}
var email = document.workorder.emailid.value;
atpos = email.indexOf("#")
dotpos = email.lastIndexOf(".")
if (email == " " || atpos < 1 || (dotpos - atpos < 2)) {
alert("Please provide your Zipcode!")
document.workorder.emailid.focus();
return false;
}
console.log("validated");
return (true);
}
// Generate an random ID
function randomString() {
var string_length = 8;
var chars = "abcdefghijklmnopqrstuvwvxyz012345678";
var text = " ";
for (var i = 0; i < string_length; i++) {
var rnum = Math.floor(Math.random() * chars.length);
text += chars.substring(rnum, rnum + 1);
}
document.workorder.randomfield.value = text;
}
// Generate box with ID and CCID
function getData() {
var fs = require('fs');
var ICCID = require('./masterlist.json')
if (ICCID.length != 0) {
var index = Math.floor(Math.random() * ICCID.length);
var pickedID = ICCID[index];
ICCID.splice(index, 1); // This removes the picked element from the array
fs.writeFile("masterlist.json", JSON.stringify(ICCID), function(err) {
if (err) {
return consolo.log(err);
}
});
} else {
console.log("Sorry, There is no more ICCID to complete the form");
}
document.workorder.ID.value = pickedID
}
});
<html>
<head>
<title>Work Order Form</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script type="text/javascript" src="validate.js"></script>
</head>
<body>
<form action="#" name="workorder" id="form_id">
<table cellpadding="2" width="300" height="300" bgcolor=g reen align="center" cellspaceing="2">
<tr>
<td colspan=2>
<center>
<fontsize=4><b>Work Order Form</b>
</font>
</center>
</td>
</tr>
<tr>
<td>Name</td>
<td>
<input type="text" name="name" id="name" size="30" align="center">
</td>
</tr>
<tr>
<td>Address</td>
<td>
<input type="text" name="address" id="adress" size="30">
</td>
</tr>
<tr>
<td>City</td>
<td>
<input type="text" name="city" id="city" size="30">
</td>
</tr>
<tr>
<td>State</td>
<td>
<select name="state">
<option value="-1" selected>select..</option>
<option value="Alabam">AL</option>
<option value="Alaska">AK</option>
<option value="Arizona">AZ</option>
<option value="Arkansa">AR</option>
<option value="California">CA</option>
<option value="Colorado">CO</option>
<option value="Connecticut">CT</option>
<option value="Delaware">DE</option>
<option value="Florida">FL</option>
<option value="Georgia">GA</option>
<option value="Hawaii">HI</option>
<option value="Idaho">ID</option>
<option value="Illinois">IL</option>
<option value="Indiana">IN</option>
<option value="Iowa">IA</option>
<option value="Kansas">KS</option>
<option value="Kentucky">KY</option>
<option value="Louisiana">LA</option>
<option value="Maine">ME</option>
<option value="Maryland">MD</option>
<option value="Michigan">MI</option>
<option value="Minnesota">MN</option>
<option value="Mississpi">MS</option>
<option value="Missori">MO</option>
<option value="Montana">MT</option>
<option value="Nebraska">NE</option>
<option value="Nevada">NV</option>
<option value="New Hampshire">NH</option>
<option value="New Jersey">NJ</option>
<option value="New Mexico">NM</option>
<option value="New York">NY</option>
<option value="Nortj Carolina">NC</option>
<option value="North Dakota">ND</option>
<option value="Ohio">OH</option>
<option value="Oklahoma">OK</option>
<option value="Oregon">OR</option>
<option value="Pennsylvania">PA</option>
<option value="Rhode Island">RI</option>
<option value="South Carolina">SC</option>
<option value="South Dakota">SD</option>
<option value="Tennessee">TN</option>
<option value="Texas">TX</option>
<option value="Utah">UT</option>
<option value="Vermont">VT</option>
<option value="Virgina">VA</option>
<option value="Washington">WA</option>
<option value="West Virgina">WV</option>
<option value="Wisconsin">WI</option>
<option value="Wyoming">WY</option>
</select>
</td>
<tr>
<td>Zipcode</td>
<td>
<input type="text" name="zipcode" id="zipcode_id" size="30">
</td>
</tr>
<tr>
<td>Phone</td>
<td>
<input type="text" name="phone" id="phone_id" size="30">
</td>
</tr>
<tr>
<td>Email</td>
<td>
<input type="text" name="email" id="emailid" size="30">
</td>
</tr>
<tr>
<td>
<input type="reset">
</td>
<td>
<button name="sumbit" type="submit" id="btn_id" onlick="randomString(); getData();">Submit</button>
</td>
</tr>
<tr>
<td>
<name="randomfield" id="generateID" value=" ">
</td>
<td>
<name="ID" id="ID" value=" ">
</td>
</tr>
</form>
</table>
</body>

When you sumbit() the form, you leave the page. The alert() never fires! Try changing the code to:
if (valid)
{
alert(" Name :" + name_order + " \n Address : " + address_order +
" \n City : " + city_order + " \n State: " + state_order+
" \n Zipcode: " + zipcode_order + " \n Phone: " + phone +
" \n Email: "+ email_order + " \n ID: " + randID_order +
" \n SIM Card: " + ICCID_order);
$("form[name='workorder']").submit();
}

instead of $(button).click() use $(form).submit for your listener
in your code the form does not have a post location. You can add a return false to the bottom of the submit anonymous function for now
you have a reference to a variable "phone" in your alert call that is not defined
$("form#form_id").submit(function() {
var valid = validate();
var name_order = $("#name").val();
var address_order = $("#address").val();
var city_order = $("#city").val();
var state_order = $("#state").val();
var zipcode_order = $("#zipcode_id").val();
var phone_order = $("#phone_id").val();
var email_order = $("#emailid").val();
var randID_order = $("#generateID").val();
var ICCID_order = $("#ID").val();
if (valid) {
// you don't need to manually submit it since we attached to the submit listener above instead of click
// $("form[name='workorder']").submit();
alert(" Name :" + name_order + " \n Address : " + address_order +
" \n City : " + city_order + " \n State: " + state_order +
" \n Zipcode: " + zipcode_order + " \n Phone: " + phone_order + // you had a bad reference here
" \n Email: " + email_order + " \n ID: " + randID_order +
" \n SIM Card: " + ICCID_order)
}
// return false until you put in a proper post location
return false;
});
I fixed all these in an example at https://jsfiddle.net/algorithmicMoose/n0t83ees/ with comments

BMR calculator: Substituting body mass with lean body mass in BMR calculator

I modified a body fat calculator using the US navy formula.
The calculator provides
1. BMR
2. Minimum calorie requirement
3. Body fat
The calculator is working well but i would like the Basal metabolic rate to utilize Lean body mass as opposed to weight (provided in the form)
i added: wt1 = wt-(wt/100*fatPercent) before the BMR calculation.
The console shows no errors but i get no results when i execute the script. Not sure how to correct this.
Thanks in advance
Javascript code
<script type="text/javascript">
<!--
function Calculate()
{
var ht = parseFloat(document.cal_frm.txtHeight.value);
var nk = parseFloat(document.cal_frm.txtNeck.value);
var wa = parseFloat(document.cal_frm.txtWaist.value);
var hp = parseFloat(document.cal_frm.txtHip.value);
var wt = parseFloat(document.cal_frm.txtWeight.value);
var ag = parseInt(document.cal_frm.txtAge.value);
var sexf=false;
if (document.cal_frm.opGender.value == "1"){sexf=true;}
if (document.cal_frm.opHeight.value == "1") {ht = ht * 2.54;}
if (document.cal_frm.opNeck.value == "1") {nk = nk * 2.54;}
if (document.cal_frm.opWaist.value == "1") {wa = wa * 2.54;}
if (document.cal_frm.opHip.value == "1") {hp = hp * 2.54;}
if (document.cal_frm.opWeight.value == "1") {wt = wt * 0.4536;}
document.getElementById('feedback').innerHTML='';
var errors='';
if ((ht < 122) || (ht > 230) || isNaN(ht)){
err=((document.cal_frm.opHeight.value == "1")? '48inches to 90inches' : '122cm to 230cm');
errors+='Enter height between '+err+'!n';}
if ((nk < 10) || (nk > 100) || isNaN(nk)){
err=((document.cal_frm.opNeck.value == "1")? '6inches to 20inches' : '15cm to 50cm');
errors+='Enter neck between '+err+'!n';}
if ((wa < 20) || (wa > 200) || isNaN(wa)){
err=((document.cal_frm.opWaist.value == "1")? '20inches to 80inches' : '50cm to 150cm');
errors+='Enter waist between '+err+'!n';}
if ((wt < 30) || (wt > 150) || isNaN(wt)){
err=((document.cal_frm.opWeight.value == "1")? '67lb to 333lb' : '30Kg to 150Kg');
errors+='Enter weight between '+err+'!n';}
if ((ag < 19) || (ag > 70) || isNaN(ag)){
err='19yrs to 70yrs';
errors+='Enter age between '+err+'!n';}
if (sexf==true){
if ((hp < 50) || (hp > 200) || isNaN(hp)){
err=((document.cal_frm.opHip.value == "1")? '20inches to 100inches' : '50cm to 250cm');
errors+='Enter hip between '+err+'!n';}}
if(errors){
alert('The following error(s) occurred:n'+errors);
return;}
var BMR;
var fatpercent;
if (sexf==true) {
fatPercent = 495 / (1.29579 - 0.35004 * (logten(wa + hp - nk)) + 0.221 * (logten(ht))) - 450;
wt1 = wt-(wt/100*fatPercent) /*added below code to substitute weight with lean body mass in the below calculation*/
BMR = 655 + (9.6 * wt1) + (1.8 * ht) - (4.7 * ag);
}
else{
fatPercent = 495 / (1.0324 - 0.19077 * (logten(wa - nk)) + 0.15456 * (logten(ht))) - 450;
wt1 = wt-(wt/100*fatPercent)/*added below code to substitute weight with lean body mass in the below calculation*/
BMR = 66 + (13.7 * wt1) + (5 * ht) - (6.8 * ag);
}
BMR=Math.round(BMR*10)/10;
fatPercent = (Math.round(fatPercent*10))/10;
var dailyCal;
if (document.cal_frm.opActivity.value == "0") {dailyCal = BMR * 1.2;}
if (document.cal_frm.opActivity.value == "1") {dailyCal = BMR * 1.375;}
if (document.cal_frm.opActivity.value == "2") {dailyCal = BMR * 1.55;}
if (document.cal_frm.opActivity.value == "3") {dailyCal = BMR * 1.725;}
if (document.cal_frm.opActivity.value == "4") {dailyCal = BMR * 1.9;}
if (document.cal_frm.opWeight.value == "1") {
document.getElementById('feedback').innerHTML = "<p>Your BMR is: " + BMR + "<br />" + "Minimum Calorie
requirement is: " + (Math.round(dailyCal)) + ";<br />" + "Your Body Fat is " + fatPercent + "%." + ";<br /></p>";
}
function logten(v){
return (Math.log(v)/Math.log(10));
}
function resetAll(){
document.getElementById('feedback').innerHTML ='';
}
}
-->
</script>
HTML code
<form name="cal_frm" id="cal_frm" style="width:400px; margin:20px 10px 20px 10px;" onsubmit="return false">
<table style="width:400px; margin:0px 10px 20px 10px;">
<tr><td style="width: 275px;">
<table id="cal_data">
<tr>
<td style="padding-left:5px;">Height:</td>
<td><input class="cal_text" type="text" name="txtHeight" size="20" ></td>
<td><select class="cal_option" name="opHeight">
<option value="0">Cm</option>
<option value="1">Inch</option>
</select></td>
</tr>
<tr>
<td style="padding-left:5px;">Neck:</td>
<td><input class="cal_text" type="text" name="txtNeck" size="20" ></td>
<td><select class="cal_option" name="opNeck">
<option value="0">Cm</option>
<option value="1">Inch</option>
</select></td>
</tr>
<tr>
<td style="padding-left:5px;">Waist:</td>
<td><input class="cal_text" type="text" name="txtWaist" size="20" ></td>
<td><select class="cal_option" name="opWaist">
<option value="0">Cm</option>
<option value="1">Inch</option>
</select></td>
</tr>
<tr>
<td style="padding-left:5px;">Hip (Female):</td>
<td><input class="cal_text" type="text" name="txtHip" size="20" ></td>
<td><select class="cal_option" name="opHip">
<option value="0">Cm</option>
<option value="1">Inch</option>
</select></td>
</tr>
<tr>
<td style="padding-left:5px;">Weight:</td>
<td><input class="cal_text" type="text" name="txtWeight" size="20" ></td>
<td><select class="cal_option" name="opWeight">
<option value="0">Kg</option>
<option value="1">Pound</option>
</select></td>
</tr>
</table>
</td>
<td style="padding: 10px 0 0 10px;">
Gender:<br >
<select class="cal_option" style="width:72%;border: solid 1px silver;" name="opGender">
<option value="0">Male</option>
<option value="1">Female</option>
</select><br ><br >
Age:<br >
<input class="cal_text" style="width:60%;border: solid 1px silver;" type="text" name="txtAge" size="20" > yrs.
</td>
</tr>
<tr>
<td colspan="2" style="padding:10px 0 10px 0;"><span style="padding:0 2px;">Activity:</span>
<select id="Select7" class="cal_option" style="width:80%; border:1px solid silver;" name="opActivity">
<option selected="selected" value="0">Sedentary (Very little or no exercise)</option>
<option value="1">Lightly active (light exercise/sports 1-3 days/week)</option>
<option value="2">Moderately active (moderate exercise/sports 3-5 days/week)</option>
<option value="3">Very active (hard exercise/sports 6-7 days a week)</option>
<option value="4">Extra active (very hard exercise/sports & physical job or 2x training)</option>
</select>
</td>
</tr>
<tr>
<td id="feedback" colspan="2" style="padding:0 0 5px 0; font-family:arial; font-size:11px; color:#333333;" ><a
style="font-size:1px;color:#ffffff;line-height:1%;" href="http://ramui.com">http://ramui.com</a></td>
</tr>
<tr>
<td colspan="2">
<input onclick="Calculate()" class="cal_button" type="button" value="Calculate" > <input type="reset"
class="cal_button" value="Reset" onclick="resetAll()" ></td>
</tr></table>
</form>

You output result only if weight is specified in pounds.

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>

Populate any textbox in an HTML table with one javascript function

I have not posted on Stack in a long time so my apologies if my question is missing any obvious details for a solution.
Here is my problem: I have an html table with 20 rows, 5 columns of textboxes in each row. I have the rows populating values in 3 specific textboxes (Total pipes, total fitting, total other items) using the 'onchange' event in javascript functions. The way it works is you type in either 'pipe', 'fitting', or 'other' in a textbox, then you select the value 1,2,3,4, or 5 from a select drop-down. The select drop-down has an 'onchange' event. The 'onchange event then populates another textbox with 'total pipes being ordered' , 'total fitting items' being ordered or 'total other items ordered' based on if you typed 'pipe', 'fitting' or 'other' and which row you indicated this in.
For example, if you select 'pipes' and a quantity of '3' in row 1, then select 'pipes' and a quantity of '5' in row 7, the value in the 'total pipes' textbox has to show '8'.
My code is going to get out of hand quickly the direction I am going and I am sure there is a much simpler way to make this week. Any help is appreciated.
Below is my code:
HTML
<table id="mainTbl1">
<tr>
<th><input type="text" id="txtItemBox" value="Item#" readonly=true></th>
<th><input type="text" id="txtItemBox" value="Item Type?" readonly=true> </th>
<th><input type="text" id="txtItemBox" value="Quantity" readonly=true></th>
<th><input type="text" id="txtItemBox" value="Size" readonly=true></th>
<th><input type="text" id="txtItemBox" value="Description" readonly=true></th>
<th><input type="text" id="txtItemBox" value="Unit Price" readonly=true></th>
<th><input type="text" id="txtItemBox" value="Extend Price" readonly=true></th></tr>
<tr>
<td><input type="text" id="" value="1" /></td>
<td><input type="text" id="seltype" /></td>
<td><select id="txtItemBoxVal2" onchange="populateUPrice()">
<option value="0">-----</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select></td>
<td><input type="text" id="" /></td>
<td><input type="text" id="" /></td>
<td><input type="text" id="txt2" /></td>
<td><input type="text" id="txt2e" /></td>
</tr>
<tr>
<td><input type="text" id="" value="2" /></td>
<td><input type="text" id="seltype2" /></td>
<td><select id="txtItemBoxVal3" onchange="populateUPrice2()">
<option value="0">-----</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select></td>
<td><input type="text" id="" /></td>
<td><input type="text" id="" /></td>
<td><input type="text" id="txt3" /></td>
<td><input type="text" id="txt3e" /></td>
</tr>
JavaScript
<script type="text/javascript">
var stotal;
var s1, s2, s3, t1, t2, t3;
function populateUPrice() {
// declare variable to hold quantity amount
s1 = document.getElementById("txtItemBoxVal2").value;
t1 = document.getElementById("seltype").value;
stotal = s1;
if (t1 == "pipe") {
document.getElementById("seltype").innerHTML = "pipe"
document.getElementById("pipeFt").value = s1;
document.getElementById("fittingsCt").value = "";
document.getElementById("otherVal").value = "";
} else if (t1 == "fitting") {
document.getElementById("seltype").innerHTML = "fitting"
document.getElementById("fittingsCt").value = s1;
document.getElementById("pipeFt").value = "";
document.getElementById("otherVal").value = "";
} else if (t1 == "other") {
document.getElementById("seltype").innerHTML = "other"
document.getElementById("otherVal").value = s1;
document.getElementById("pipeFt").value = "";
document.getElementById("fittingsCt").value = "";
}
if (document.getElementById("txtItemBoxVal2")) {
document.getElementById("txt2").value = "0.00"
}
}
function populateUPrice2() {
// declare variable to hold quantity amount
s2 = document.getElementById("txtItemBoxVal3").value;
t2 = document.getElementById("seltype2").value;
stotal = parseInt(s1) + parseInt(s2);
if (t1 == "pipe" && t2 == "pipe") {
document.getElementById("seltype2").innerHTML = "pipe"
document.getElementById("pipeFt").value = parseInt(stotal);
document.getElementById("fittingsCt").value = "";
document.getElementById("otherVal").value = "";
} else if (t1 == "fitting" && t2 == "fitting") {
document.getElementById("seltype2").innerHTML = "fitting"
document.getElementById("fittingsCt").value = parseInt(stotal);
document.getElementById("pipeFt").value = "";
document.getElementById("otherVal").value = "";
} else if (t1 == "other" && t2 == "other") {
document.getElementById("seltype2").innerHTML = "other"
document.getElementById("otherVal").value = parseInt(stotal);
document.getElementById("pipeFt").value = "";
document.getElementById("fittingsCt").value = "";
} else if (t1 == "pipe" && t2 == "fitting") {
document.getElementById("pipeFt").value = s1;
document.getElementById("fittingsCt").value = s2;
document.getElementById("otherVal").value = "";
} else if (t1 == "pipe" && t2 == "other") {
document.getElementById("pipeFt").value = s1;
document.getElementById("fittingsCt").value = "";
document.getElementById("otherVal").value = s2;
} else if (t1 == "fitting" && t2 == "pipe") {
document.getElementById("pipeFt").value = s2;
document.getElementById("fittingsCt").value = s1;
document.getElementById("otherVal").value = "";
} else if (t1 == "fitting" && t2 == "other") {
document.getElementById("pipeFt").value = "";
document.getElementById("fittingsCt").value = s1;
document.getElementById("otherVal").value = s2;
} else if (t1 == "other" && t2 == "pipe") {
document.getElementById("pipeFt").value = s2;
document.getElementById("fittingsCt").value = "";
document.getElementById("otherVal").value = s1;
} else if (t1 == "other" && t2 == "fitting") {
document.getElementById("pipeFt").value = "";
document.getElementById("fittingsCt").value = s2
document.getElementById("otherVal").value = s1;
}
if (document.getElementById("txtItemBoxVal3")) {
document.getElementById("txt3").value = "0.00";
}
}