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>
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
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.
We all have baggage to carry in life, unfortunately for me I always get the trolley with the wonky wheel...
Code:
Youre = {
STILL_not_getting_it:function(){
alert("YOU, the original poster / thread starter NEED to POST the code and NOT a LINK.");
},
MissingThePoint:function(msg){
alert("You're missing the point. " + msg);
}
}
Youre.STILL_not_getting_it();
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.
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...
We all have baggage to carry in life, unfortunately for me I always get the trolley with the wonky wheel...
Code:
Youre = {
STILL_not_getting_it:function(){
alert("YOU, the original poster / thread starter NEED to POST the code and NOT a LINK.");
},
MissingThePoint:function(msg){
alert("You're missing the point. " + msg);
}
}
Youre.STILL_not_getting_it();
Reply With Quote
Bookmarks