www.webdeveloper.com
Results 1 to 5 of 5

Thread: Can't get script to work correctly

  1. #1
    Join Date
    Nov 2011
    Posts
    3

    Can't get script to work correctly

    I am in a web development class and am having trouble with a page I am developing. It is a css form for calculating the cost of a car. the Javascript doesn't seem to be working. If someone could please take a look at it and let me know what I am missing. Thanks. All I am getting when I hit the "Update Price" button is a flashing vertical line. Help!!!!


    Here is the code:



    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <title>JWS: Assignment 11-1</title>
    <style type="text/css">
    body {font-family:Arial; font-size:10pt}
    label {width:450px; text-align:left;
    margin-top: 0px; padding-right:10px;}

    </style>
    <script type="text/javascript">
    /* <![CDATA[ */
    function GetTotal()
    {
    var PackagePrice = 0
    var UpgradesPrice = 0
    var WheelPrice = 0
    var CoverPrice = 0
    var RemotePrice = 0
    var TotalPrice = 0
    var i
    // Get packages price
    for (i=1; i<=3; i++) {
    if (document.getElementById("Special" + i).checked) {
    PackagePrice = parseInt(document.getElementById("Special" + i).value)
    }
    }
    // Get Upgrades Price
    for (i=1; i<=4; i++) {
    if (document.getElementById("Upgrades" + i).checked) {
    UpgradesPrice = parseInt(document.getElementById("Upgrades" + i).value)
    }
    }
    // Get Wheel Price
    i = document.getElementById("Wheels").selectedIndex
    WheelPrice = parseInt(document.getElementById("Wheels")[i].value)
    // Get Cover Price
    if (document.getElementById("Cover").checked) {
    CoverPrice = parseInt(document.getElementById("Cover").value) }
    else {
    CoverPrice = 0}
    // Get Remote Price
    if (document.getElementById("Remote").checked) {
    RemotePrice = parseInt(document.getElementById("Remote").value) }
    else {
    RemotePrice = 0}
    // Get Total Price
    TotalPrice = 26975 + PackagePrice + UpgradesPrice + WheelPrice+ CoverPrice+ RemotePrice
    document.getElementById("TotalPrice").value = TotalPrice
    }
    /* ]]> */
    </script>

    </head>
    <body>
    <div>

    <form name="GetTotal()" >
    <h2> Build Your Car</h2>
    <p>Base Price:<span style="margin-left:210px">$26,975</span></p>
    <div>
    <label for="Special">Packages:</label>
    <input type="radio" id="Special1" name="Special1" value="0" style="margin-left:209px"/>Standard<br/>
    <input type="radio" id="Special2" name="Special1" value="345" style="margin-left:285px"/>Sprit Appearance w/ accent color (add $345)<br/>
    <input type="radio" id="Special3" name="Special1" value="400" style="margin-left:285px"/>Premier Trim (add $400)<br/>
    </div>

    <div>
    <label for="Upgrades">Upgrades:</label>
    <input type="radio" id="Standard" name="Upgrades" value="0" style="margin-left:212px"/>Standard<br/>
    <input type="radio" id="Upgrades1" name="Upgrades" value="300" style="margin-left:285px" />Wheel Locking Kits (add $300)<br/>
    <input type="radio" id="Upgrades2" name="Upgrades" value="325" style="margin-left:285px"/>Active Anti-Theft System (add $325)<br/>
    <input type="radio" id="Upgrades3" name="Upgrades" value="1295" style="margin-left:285px"/>Shaker 1000 Audio System (add $1295)<br/>
    </div>
    <div>
    <label for="Wheels">Wheels:</label>
    <select
    id="Wheels"
    size="1" style="margin-left:220px" name="Wheels">
    <option value="0">Premium Painted Cast Aluminum</option>
    <option value="195">17" Bright Machined Cast Aluminum (add $195)</option>
    <option value="925">18" Premium Aluminum (add $925)</option>
    <option value="925">18" Polished Aluminum (add $925)</option>

    </select>
    </div>
    <div>
    <label for="Cover">Full Vehicle Cover:</label>
    <input type="checkbox" id="Cover" name="Cover" value="235" style="margin-left:165px"/>(add $235)<br/>
    </div>
    <div>
    <label for="Remote">Power Code Remote Start:</label>
    <input type="checkbox" id="Remote" name="Remote" value="250" style="margin-left:117px"/>(add $250)<br/>
    </div>
    <div>

    <label for="TotalPrice">
    <input type="button" value="Update Price" onclick="GetTotal()" style="float:left"/></label><span style="margin-left:160px">$</span>
    <input type="text" id="TotalPrice" size="30" style="color:red "/>
    </div>



    </form>

    </div>


    </body>

    </html>

  2. #2
    Join Date
    Jan 2009
    Location
    Insanity
    Posts
    1,131
    Radio button groups are all named the same in the name tag and you test for the "checked" value by looping through the radio button elements to get the checked value, so what you want to be saying in the HTML is not
    HTML Code:
    <div>
     <label for="Special">Packages:</label>
     <input type="radio" id="Special1" name="Special1" value="0" style="margin-left:209px"
    />Standard<br/>
     <input type="radio" id="Special2" name="Special1" value="345" style="margin-left:285px"
    />Sprit Appearance w/ accent color (add $345)<br/>
     <input type="radio" id="Special3" name="Special1" value="400" style="margin-left:285px"
    />Premier Trim (add $400)<br/>
     </div>
    But more like
    HTML Code:
    <div>
     <label for="Special">Packages:</label>
     <input type="radio" name="Special1" value="0" style="margin-left:209px"
    />Standard<br/>
     <input type="radio" name="Special1" value="345" style="margin-left:285px"
    />Sprit Appearance w/ accent color (add $345)<br/>
     <input type="radio" name="Special1" value="400" style="margin-left:285px"
    />Premier Trim (add $400)<br/>
     </div>
    This "Special" radio group is now under that group name "Special" as an array, the result of the checked value will be 0,345 or 400 see here for an example of finding a checked button in a radio set.

    The function that tests if a radio button was checked can be modified to return the selected value,
    Code:
    function getCheckedValue( btnGrpName ) {
      var radioSet = document.getElementsByName( btnGrpName ); // grab the radio group
      for (var btn=0; btn<radioSet.length; btn++)
        if ( radioSet[btn].checked == true)
    		return radioSet[btn].value - 0; 
    				/* We return the value of 
    				 the checked radio button and
    				 subtract zero to return a
    				 numeric value. */
      return 0;   // return 0 as we didn't find one!
    }
    so calling PackagePrice = getCheckedValue("Special1"); in your script would return the value of the checked button or zero or just as easily -1 as a control value.

    and similar with UpgradesPrice, you use getCheckedValue("Upgrades"); and so on.

    Your "GetTotal()" function can then be rewritten to check if your missing any input information on the radio buttons. and then update the output field with the total.

    So does this give you a leg up in the right direction or was this clear as mud?

    And finally, please WRAP YOUR CODE in forum tags, it makes for easier reading and indentation is also easier on the eye and helps follow program flow.

  3. #3
    Join Date
    Nov 2011
    Posts
    3
    Sorry, still as confused as ever. The professor gave us the javascript and instructions on what to use for "name" and "id" in the inputs. I can't get a reply from him to see what I've done wrong so I turned here. Thanks for the reply.

  4. #4
    Join Date
    Jan 2009
    Location
    Insanity
    Posts
    1,131
    Well all I can do is give you examples of stuff that exist on here as I like many do not answer homework questions.

    If your professor has set this coding example as an assignment on how to validate a form then I suggest that he checks his teaching materials again or go and learn javascript. I am no expert myself but can tell you that given my programming experience of other languages and JavaScript, I wouldn't program like that or use an unnecessary method to obtain data which IMHO is very untidy way of going about it.

    The established method is as I have given in my example and its up to you to understand the function and adapt it for your needs. This is the important bit, you MUST fully understand how any function works in your script so that your teacher can assess that you have understood the programming and use of the elements in that function.

    Please quote me to your teacher...

  5. #5
    Join Date
    Nov 2011
    Posts
    3
    Thanks again. I appreciate all of your help. I thought it might be a problem with the Javascript but wasn't sure. Thanks

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles