Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Nov 2012
    Location
    Canada
    Posts
    22
    Thanks
    1
    Thanked 0 Times in 0 Posts

    I'm stuck on createElement onclick function

    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>

  • #2
    New Coder
    Join Date
    Nov 2012
    Location
    Canada
    Posts
    22
    Thanks
    1
    Thanked 0 Times in 0 Posts

    P.S. This is what I tried...

    Code:
    newfield.onclick=function(){function sumaddexp ()
    {
    var add1 = document.getElementById("Additional_Expenses_0").value;
    var add2 = document.getElementById("Additional_Expenses_1").value;
    var add3 = document.getElementById("Additional_Expenses_2").value;
    var add4 = document.getElementById("Additional_Expenses_3").value;
    var add5 = document.getElementById("Additional_Expenses_4").value;
    
    var subtotal = add1 + add2 + add3 + add4 + add5;
    document.getElementById("extrasum").innerHTML = subtotal;
    
    }}
    I know it doesn't add to the total like I asked help with but I was trying anything. In this attempt I was trying to get it to subtotal and write into the div. I don't know if I'm failing at getting the value or if I'm not doing the innerHTML part right. I don't know where I'm failing.
    Last edited by jswannabe; 11-30-2012 at 02:44 AM.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •