Need help getting fields to Populate using Javascript

Question

I am taking an introduction course to HTML and have been struggling to find my error with a page that uses java. I am sure I am making a simple mistake but I am not seeing it

Here is the fiddle of the code I am working with: https://jsfiddle.net/Terranova1340/ctc66nmu/2/

  <body onload="processForm()">
<div id="wrapper">
<form  id="cars" method="get">
<h1>AutoMart Sales Order Form</h1>
<img id="imgCar" src="civic2.jpg" />
<table class="Controls">
<tr>
<td><label for="Model">Select a Model:</label><br></td>
<td><select id="selModel" onchange="chgImage()">
  <option value="civic" >Civic</option>
  <option value="accord" >Accord</option>
  </select></td>
</tr>
<tr>
<td><label for="optAcces">Optional Accessories:</label><br></td>
<td><label class='checkbox'><input type="checkbox" id="optAcces1"value="stereoSys" onchange="processForm()"> Stereo System<br>
<label class='checkbox'><input type="checkbox" id="optAcces2" value="leatherInt" onchange="processForm()"> Leather Interiors<br>
<label class='checkbox'><input type="checkbox" id="optAcces3" value="gpsSys" onchange="processForm()"> GPS System<br><br>
</td>
</tr>
<tr>
</tr>
<tr>
<tr>
</tr>
<td><label for="extFin">Exterior Finish:</label><br></td>
<td><label class='radiolabel'><input type="radio" name="selectedfinish" id="stanFin" onchange="processForm()"> Standard Finish<br>
<label class='radiolabel'><input type="radio" name="selectedfinish" id="metalFin" onchange="processForm()"> Metalic Finish<br>
<label class='radiolabel'><input type="radio" name="selectedfinish" id="custFin" onchange="processForm()"> Customized Finish<br>
</td>
</tr>
<tr>
<td><label for="base">Base Price</label><br></td>
<td><input type="text" id="basePrice" style="text-align:right;" readonly><br></td>
</tr>
<tr>
<td><label for="access">Accessories Price</label><br></td>
<td><input type="text" id="accessPrice" style="text-align:right;" readonly><br></td>
</tr>
<tr>
<td><label for="extPrice">Exterior Finish Price</label><br></td>
<td><input type="text" id="extPrice" style="text-align:right;" readonly><br></td>
</tr>
<tr>
<td><label>Estimated Total Price</label><br></td>
<td><input class- "ReadOnlyControls" type="text" name="estPrice" id="estPrice" style="text-align:right;" readonly><br></td>
</tr>
</table>




<input class="buttons" type="reset"  value="Clear">
<input class="buttons" type="button" onclick="window.print()"; value="Print Form" id="print">





</form>
</div>
</body>
</html>

Java is

function chgImage() {
    if (document.getElementById("selModel").value =="civic")
        {
            document.getElementById("imgCar").src="Civic2.jpg";
        }
    else
    {
        document.getElementById("imgCar").src="Accord2.jpg";
    }
    processForm();
}

function processForm(){

    var bPrice = 0;
    var aPrice = 0;
    var oPrice = 0;
    var tPrice = 0;

    if (document.getElementById("selModel").value =="civic")
    {
            bPrice = 17355.89;

         if (document.getElementById("optAccess1").checked == true)
        { 
            aPrice = aPrice + 400.22;
        }
         if (document.getElementById("optAccess2").checked == true)
        {
            aPrice = aPrice + 850.44;
        }
         if (document.getElementById("optAccess3").checked == true)
        {
            aPrice = aPrice + 1600.00;
        }
         if (document.getElementById("metalFin").checked == true)
        {
            oPrice = 305.72;
        }
         if (document.getElementById("custFin").checked == true)
        {
            oPrice = 350.00;
        }
    }
    else
    {
     basePrice = 19856.79;

         if (document.getElementById("optAccess1").checked == true)
         {
            aPrice = aPrice + 500.89;
         }
         if (document.getElementById("optAccess2").checked == true)
         {
            aPrice = aPrice + 1015.85;
         }
         if (document.getElementById("optAccess3").checked == true)
         {
            aPrice = aPrice + 1600.00;
         }
         if (document.getElementById("metalFin").checked == true)
         {
            oPrice = 385.67;
         }
         if (document.getElementById("custFin").checked == true)
        {
            oPrice = 400.00;
        }
    }



    //calculate total

    tPrice = bPrice+aPrice+oPrice;
    document.getElementById("basePrice").value = "$" + formatCurrency(bPrice).toString();
    document.getElementById("accessPrice").value = "$" + formatCurrency(aPrice).toString();
    document.getElementById("extPrice").value = "$" + formatCurrency(oPrice).toString();
    document.getElementById("estPrice").value = "$" + formatCurrency(tPrice).toString();

    }

    function formatCurrency(num){
    num = isNaN(num) || num === ''|| num === null ? 0.00 : num;
    return parseFloat(num).toFixed(2);
    }

My issue is the Base Price to Estimated Total Price fields aren't populating.

Thanks in advance!

This is Javascript, not Java.

Gili
– Gili

2016-08-03 04:56:34 +00:00
Commented Aug 3, 2016 at 4:56 — Gili
– Gili, Commented Aug 3, 2016 at 4:56
Thanks for the correction, sorry for the confusion.

Terranova1340
– Terranova1340

2016-08-03 05:00:07 +00:00
Commented Aug 3, 2016 at 5:00 — Terranova1340
– Terranova1340, Commented Aug 3, 2016 at 5:00

Niklesh Raut · Accepted Answer · 2016-08-03 05:03:43Z

function chgImage() {
    if (document.getElementById("selModel").value =="civic")
        {
            document.getElementById("imgCar").src="Civic2.jpg";
        }
    else
    {
        document.getElementById("imgCar").src="Accord2.jpg";
    }
    processForm();
}

function processForm(){

    var bPrice = 0;
    var aPrice = 0;
    var oPrice = 0;
    var tPrice = 0;

    if (document.getElementById("selModel").value =="civic")
    {
            bPrice = 17355.89;

         if (document.getElementById("optAccess1").checked == true)
        { 
            aPrice = aPrice + 400.22;
        }
         if (document.getElementById("optAccess2").checked == true)
        {
            aPrice = aPrice + 850.44;
        }
         if (document.getElementById("optAccess3").checked == true)
        {
            aPrice = aPrice + 1600.00;
        }
         if (document.getElementById("metalFin").checked == true)
        {
            oPrice = 305.72;
        }
         if (document.getElementById("custFin").checked == true)
        {
            oPrice = 350.00;
        }
    }
    else
    {
     basePrice = 19856.79;

         if (document.getElementById("optAccess1").checked == true)
         {
            aPrice = aPrice + 500.89;
         }
         if (document.getElementById("optAccess2").checked == true)
         {
            aPrice = aPrice + 1015.85;
         }
         if (document.getElementById("optAccess3").checked == true)
         {
            aPrice = aPrice + 1600.00;
         }
         if (document.getElementById("metalFin").checked == true)
         {
            oPrice = 385.67;
         }
         if (document.getElementById("custFin").checked == true)
        {
            oPrice = 400.00;
        }
    }



    //calculate total

    tPrice = bPrice+aPrice+oPrice;
    document.getElementById("basePrice").value = "$" + formatCurrency(bPrice).toString();
    document.getElementById("accessPrice").value = "$" + formatCurrency(aPrice).toString();
    document.getElementById("extPrice").value = "$" + formatCurrency(oPrice).toString();
    document.getElementById("estPrice").value = "$" + formatCurrency(tPrice).toString();

    }

    function formatCurrency(num){
    num = isNaN(num) || num === ''|| num === null ? 0.00 : num;
    return parseFloat(num).toFixed(2);
    }

<body onload="processForm()">
<div id="wrapper">
<form  id="cars" method="get">
<h1>AutoMart Sales Order Form</h1>
<img id="imgCar" src="civic2.jpg" />
<table class="Controls">
<tr>
<td><label for="Model">Select a Model:</label><br></td>
<td><select id="selModel" onchange="chgImage()">
  <option value="civic" >Civic</option>
  <option value="accord" >Accord</option>
  </select></td>
</tr>
<tr>
<td><label for="optAcces">Optional Accessories:</label><br></td>
<td><label class='checkbox'><input type="checkbox" id="optAccess1"value="stereoSys" onchange="processForm()"> Stereo System<br>
<label class='checkbox'><input type="checkbox" id="optAccess2" value="leatherInt" onchange="processForm()"> Leather Interiors<br>
<label class='checkbox'><input type="checkbox" id="optAccess3" value="gpsSys" onchange="processForm()"> GPS System<br><br>
</td>
</tr>
<tr>
</tr>
<tr>
<tr>
</tr>
<td><label for="extFin">Exterior Finish:</label><br></td>
<td><label class='radiolabel'><input type="radio" name="selectedfinish" id="stanFin" onchange="processForm()"> Standard Finish<br>
<label class='radiolabel'><input type="radio" name="selectedfinish" id="metalFin" onchange="processForm()"> Metalic Finish<br>
<label class='radiolabel'><input type="radio" name="selectedfinish" id="custFin" onchange="processForm()"> Customized Finish<br>
</td>
</tr>
<tr>
<td><label for="base">Base Price</label><br></td>
<td><input type="text" id="basePrice" style="text-align:right;" readonly><br></td>
</tr>
<tr>
<td><label for="access">Accessories Price</label><br></td>
<td><input type="text" id="accessPrice" style="text-align:right;" readonly><br></td>
</tr>
<tr>
<td><label for="extPrice">Exterior Finish Price</label><br></td>
<td><input type="text" id="extPrice" style="text-align:right;" readonly><br></td>
</tr>
<tr>
<td><label>Estimated Total Price</label><br></td>
<td><input class- "ReadOnlyControls" type="text" name="estPrice" id="estPrice" style="text-align:right;" readonly><br></td>
</tr>
</table>




<input class="buttons" type="reset"  value="Clear">
<input class="buttons" type="button" onclick="window.print()"; value="Print Form" id="print">





</form>
</div>
</body>
</html>

You are using wrong id's, change to optAccess1,optAccess2,optAccess3 here

    <td><label class='checkbox'><input type="checkbox" id="optAccess1"value="stereoSys" onchange="processForm()"> Stereo System<br>
    <label class='checkbox'><input type="checkbox" id="optAccess2" value="leatherInt" onchange="processForm()"> Leather Interiors<br>
    <label class='checkbox'><input type="checkbox" id="optAccess3" value="gpsSys" onchange="processForm()"> GPS System<br><br>
    </td>

Awsome! so that corrected half the issue. However, when I change the drop down from Civic to Accord the same thing happens as before.
I got it, thank you so much for helping!!! I have spent the better part of the day beating my head against the wall.

Collectives™ on Stack Overflow

Need help getting fields to Populate using Javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related