I'm working on learning createElement.
I want to get the createElement input values and include them in the Total Expenses Sum onkeyup.
I want to know how and why your solution works.
Code:
<!DOCTYPE HTML>
<html>
<head>
<title>javascript Working createElement-4</title>
<style>
body {font-family:arial;}
.extrafield {display:inline;}
label {display:block; width:250px; float:left; text-align:right; margin-right:10px; }
input {text-align:center; width:100px; }
legend {font-size:20px;}
fieldset {margin:20px; }
#text input[type="button"] {margin-left:100px; width:150px; }
#warning {color:red;}
</style>
<script>
function subtotalfunction ()
{
//get the user's data
var km=parseInt(document.getElementById("kilometers").value);
var park=parseInt(document.getElementById("parking").value);
var tol=parseInt(document.getElementById("tolls").value);
var air=parseInt(document.getElementById("airline tickets").value);
var train=parseInt(document.getElementById("train").value);
var bus=parseInt(document.getElementById("bus_taxi").value);
var lod=parseInt(document.getElementById("accommodation").value);
var fb=parseInt(document.getElementById("food_beverage").value);
var kmcalc=km*0.55;
var kmdollar=parseInt(kmcalc);
//convert data to decimal
var kmdollardecimal = kmdollar.toFixed(2);
var parkdecimal = park.toFixed(2);
var toldecimal = tol.toFixed(2);
var airdecimal = air.toFixed(2);
var traindecimal = train.toFixed(2);
var busdecimal = bus.toFixed(2);
var loddecimal = lod.toFixed(2);
var fbdecimal = fb.toFixed(2);
//convert to money
document.getElementById("kmdollars").value = "$" + kmdollardecimal ;
document.getElementById("parking2").value = "$" + parkdecimal;
document.getElementById("tolls2").value = "$" + toldecimal;
document.getElementById("airline_tickets2").value = "$" + airdecimal;
document.getElementById("train2").value = "$" + traindecimal;
document.getElementById("bus_taxi2").value = "$" + busdecimal;
document.getElementById("accommodation2").value = "$" + loddecimal;
document.getElementById("food_beverage2").value = "$" + fbdecimal;
//converting the total
var total=parseInt(document.getElementById("totalexpenses").value);
var totaldecimal = total.toFixed(2);
//summing the fields
document.getElementById("results").innerHTML = kmdollar + park + tol + air + train + bus + lod + fb;
document.getElementById("totalexpenses").value = kmdollar + park + tol + air + train + bus + lod + fb;
//displaying the sum
document.getElementById("totalexpenses2").value = "$" + document.getElementById("totalexpenses").value;
}
//name and id increment variables
var namecounter=0;
var idcounter=0;
//create new input fields
function new_exp_fields()
{
var newfield = document.createElement('input');
newfield.type = "input";
newfield.name = "Additional_Expenses_" + namecounter++;
newfield.id = "Additional_Expenses_" + idcounter++;
newfield.onclick=function () {};
//limit createElement limit additional expenses
if (idcounter > 4)
{
document.getElementById("additional").disabled = true;
document.getElementById("warning").innerHTML = "You may only add 5 additional expenses";
}
//create label for new element
var label = document.createElement("Label");
label.for = "additional";
label.innerHTML="Type in Expense...";
//display new element
document.getElementById("additionalplace").appendChild(label);
document.getElementById("additionalplace").appendChild(newfield);
var mybr=document.createElement('br');
document.getElementById("additionalplace").appendChild(mybr);
}
</script>
</head>
<body>
<form onclick="value=" action="mailto:you@yourprovider.net?subject=TravelExpenseSubmissionForm" method="post" enctype="text/plain"
id="TravelExpenses" name="TravelExpenses" >
<fieldset>
<legend>Employee Information</legend>
<label for="employeename">Employee Name</label>
<input id="employeename" name="Employee Name _" type="text"><br/>
<label for="employeenumber">Employee Number</label>
<input id="employeenumber" name="Employee Name _" type="text"><br/>
</fieldset>
<fieldset>
<legend>Travel Expense Submission Form</legend>
<label for="kilometers">Kilometers</label>
<input id="kilometers" name="kilometers" type="text" maxlength="4" tabindex=1 value=0 placeholder="km"
onkeyup="subtotalfunction()" >
<input id="kmdollars" name="kmdollars" type="text" placeholder="rate @ $0.55" readonly="readonly"><br/>
<label for="parking">Parking</label>
<input id="parking" name="parking" type="text" value="0" placeholder="input" maxlength=3 tabindex=2
onkeyup="subtotalfunction()" >
<input id="parking2" name="parking2" type="text" placeholder="output" readonly="readonly"> <br/>
<label for="tolls">Tolls</label>
<input id="tolls" name="tolls" type="text" value="0" placeholder="input" maxlength=3 tabindex=3 onkeyup="subtotalfunction
()">
<input id="tolls2" name="tolls2" type="text" placeholder="output" readonly="readonly"><br/>
<label for="airline tickets">Airline Tickets</label>
<input id="airline tickets" name="airline tickets" type="text" value="0" placeholder="input" maxlength=4 tabindex=4
onkeyup="subtotalfunction()">
<input id="airline_tickets2" name="airline tickets2" type="text" placeholder="output" readonly="readonly"><br/>
<label for="train">Train</label>
<input id="train" name="train" type="text" maxlength=4 value="0" placeholder="input" tabindex=5 onkeyup="subtotalfunction
()">
<input id="train2" name="train2" type="text" placeholder="output"readonly="readonly"><br/>
<label for="bus-taxi">Bus/Taxi</label>
<input id="bus_taxi" name="bus_taxi" type="text" maxlength=3 value="0" placeholder="input" tabindex=6
onkeyup="subtotalfunction()" >
<input id="bus_taxi2" name="bus_taxi2" type="text" placeholder="output"readonly="readonly"><br/>
<label for="accommodation">Lodging</label>
<input id="accommodation" name="accomodation" type="text" maxlength=4 value="0" placeholder="input" tabindex=7
onkeyup="subtotalfunction()" >
<input id="accommodation2" name="accommodation2" type="text" placeholder="output" readonly="readonly"><br/>
<label for="food-beverage">Food & Beverage</label>
<input id="food_beverage" name="food_beverage" type="text" value="0" placeholder="input" maxlength=4 tabindex=8
onkeyup="subtotalfunction()" >
<input id="food_beverage2" name="food_beverage2" type="text" placeholder="output" readonly="readonly"> <br/>
<div id="text">
<input id="additional" name="addfieldbutton" type="button" value="Add new expense field" onclick="new_exp_fields()">
</div>
<div id="additionalplace">
</div>
<div id="warning">
</div>
<div id="extrasum">
</div>
<label for="totalexpenses">Total Expenses</label>
<input id="totalexpenses" name="totalexpenses" type="text" value="0" placeholder="total" tabindex=9 readonly="readonly" >
<input id="totalexpenses2" name="totalexpenses2" type="text" placeholder="total" readonly="readonly"><br/>
<div id="submit">
<input type="submit" value="Submit">
</div>
<!--Test for sum-->
<div id="results"></div>
</fieldset>
</form>
<p>
HTML
<ul>
<li>placeholder - which puts text into an input field but goes away when field active.</li>
<li>readonly - you can make an input field to display only and can not be written into.</li>
</p>
</body>
</html>