misheck
12-26-2008, 05:35 AM
I doing an exercise where I need to create website where a user can choose computer parts or build a customised computer. I almost finished with the example I have included below but I seem to be getting errors whenever I make a few adjustments the function produces errors so I have just emailed the working version I have.
I need help with obtaining values from the checkboxes and also assigning a value or cost to the total cost of all items
I also need to be able to let the user know the cost of the total of all the items they have slected. I will also appreciate any help from anyone who can complete the code I have started but I am also open to new suggestions.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=us-ascii">
<meta name="author" content="">
<title>Mishecks Custom PC</title>
<script language="Javascript" type="text/javascript">
var proType;
var procSpeed;
var HardDrive;
var optExtras;
//function for the processor speed
function processor()
{
var proType = document.myForm.proType.selectedIndex;
var proValue = document.myForm.proType[proType].text;
//converting the values to values
if(proType == 0)
{
proCost = 40;
}
else if(proType == 1)
{
proCost = 60;
}
else if(proType == 2)
{
proCost = 70;
}
else if(proType == 3)
{
proCost = 80;
}
window.document.myForm.itemSel.value = proValue;
window.document.myForm.totalSel.value = "£"+ proCost + ".00";
return proValue + proCost + proType;
}
//function for the cpu Speed
function Speed()
{
var proSpeed;
var proSpeed = document.myForm.procSpeed.selectedIndex;
var proValue = document.myForm.procSpeed[proSpeed].text;
if (procSpeed == 0)
//defining the cost with new selection hence I have assigned cost to the speed index
{
speedCost = 40
}
else if (proSpeed == 1)
{
speedCost = 45
}
else if (proSpeed == 2)
{
speedCost = 50
}
else if (proSpeed == 3)
{
speedCost = 55
}{
speedValue = ("You have choosen " + proType + proSpeed)
window.document.myForm.totalSel.value = "£"+ (speedCost+proCost) + ".00";
return speedValue + speedCost + procSpeed;
}
}
/*Hard Drive function with the index converted to a number value*/
function hard_Drive()
{
var Hardsize;
var Hardsize = document.myForm.HardDrive.selectedIndex;
var HardValue = document.myForm.HardDrive[Hardsize].text;
if (Hardsize == 0)
{
HardCost = 40
}
else if (Hardsize == 1)
{
HardCost = 45
}
else if (Hardsize == 2)
{
HardCost = 50
}
else if (Hardsize == 3)
{
HardCost = 55
}{
Hardsize = ("You have choosen "+ HardValue + proType + procSpeed)
window.document.myForm.totalSel.value = "£"+ (speedCost+proCost + HardCost) + ".00";
return speedValue + speedCost + HardValue;
}
}
</script>
</head>
<body>
<h1>Build your own PC</h1>
<form name="myForm">
Select the Processor type : <select name="proType" onblur="processor()">
<optgroup label="Processor Types">
<option value="Pentium 4">
Pentium 4
</option>
<option value="Dual Core" selected>
Dual Core
</option>
<option value="Dual Core2">
Dual Core2
</option>
<option value="AMD">
AMD
</option>
</optgroup>
</select>
<br>
<br>
Select Processor Speed : <select name="procSpeed" onblur="Speed()">
<optgroup label="CPU Speed">
<option value="1.4">
1.4Ghz
</option>
<option value="1.8">
1.8Ghz
</option>
<option value="2.0">
2.0Ghz
</option>
<option value="2.4">
2.4Ghz
</option>
</optgroup>
</select>
<br>
<br>
Choose your Hard Drive : <select name="HardDrive" onblur="hard_Drive()">
<optgroup label="Hard Drive">
<option value="80">
80 Gig
</option>
<option value="120">
120 Gig
</option>
<option value="160">
160 Gig
</option>
<option value="250">
250 Gig
</option>
</optgroup>
</select>
<h3><u>Optional Extras</u></h3>
<table>
<tr>
<td><input type="checkbox" name="Dvdrw" value="Dvd-rewriter"></td>
<td>Dvd-rewriter</td>
</tr>
<tr>
<td><input type="checkbox" name="Dvdrom" value="Dvd-rom"></td>
<td>Dvd-rom</td>
</tr>
<tr>
<td><input type="checkbox" name="CDrw" value="CD-rewriter"></td>
<td>CD-rewriter</td>
</tr>
<tr>
<td><input type="checkbox" name="CDrom" value="CD-rom"></td>
<td>CD-Rom</td>
</tr>
</table>
<br>
<br>
<!-- results area for both item selected and total cost --!>
Items Selected
<textarea name="itemSel" cols="10" rows="6">
</textarea>
<br>
<br>
<input type="text" size="8" name="totalSel"> <input type="button" value="Total" onclick="">
</form>
</body>
</html>
I need help with obtaining values from the checkboxes and also assigning a value or cost to the total cost of all items
I also need to be able to let the user know the cost of the total of all the items they have slected. I will also appreciate any help from anyone who can complete the code I have started but I am also open to new suggestions.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=us-ascii">
<meta name="author" content="">
<title>Mishecks Custom PC</title>
<script language="Javascript" type="text/javascript">
var proType;
var procSpeed;
var HardDrive;
var optExtras;
//function for the processor speed
function processor()
{
var proType = document.myForm.proType.selectedIndex;
var proValue = document.myForm.proType[proType].text;
//converting the values to values
if(proType == 0)
{
proCost = 40;
}
else if(proType == 1)
{
proCost = 60;
}
else if(proType == 2)
{
proCost = 70;
}
else if(proType == 3)
{
proCost = 80;
}
window.document.myForm.itemSel.value = proValue;
window.document.myForm.totalSel.value = "£"+ proCost + ".00";
return proValue + proCost + proType;
}
//function for the cpu Speed
function Speed()
{
var proSpeed;
var proSpeed = document.myForm.procSpeed.selectedIndex;
var proValue = document.myForm.procSpeed[proSpeed].text;
if (procSpeed == 0)
//defining the cost with new selection hence I have assigned cost to the speed index
{
speedCost = 40
}
else if (proSpeed == 1)
{
speedCost = 45
}
else if (proSpeed == 2)
{
speedCost = 50
}
else if (proSpeed == 3)
{
speedCost = 55
}{
speedValue = ("You have choosen " + proType + proSpeed)
window.document.myForm.totalSel.value = "£"+ (speedCost+proCost) + ".00";
return speedValue + speedCost + procSpeed;
}
}
/*Hard Drive function with the index converted to a number value*/
function hard_Drive()
{
var Hardsize;
var Hardsize = document.myForm.HardDrive.selectedIndex;
var HardValue = document.myForm.HardDrive[Hardsize].text;
if (Hardsize == 0)
{
HardCost = 40
}
else if (Hardsize == 1)
{
HardCost = 45
}
else if (Hardsize == 2)
{
HardCost = 50
}
else if (Hardsize == 3)
{
HardCost = 55
}{
Hardsize = ("You have choosen "+ HardValue + proType + procSpeed)
window.document.myForm.totalSel.value = "£"+ (speedCost+proCost + HardCost) + ".00";
return speedValue + speedCost + HardValue;
}
}
</script>
</head>
<body>
<h1>Build your own PC</h1>
<form name="myForm">
Select the Processor type : <select name="proType" onblur="processor()">
<optgroup label="Processor Types">
<option value="Pentium 4">
Pentium 4
</option>
<option value="Dual Core" selected>
Dual Core
</option>
<option value="Dual Core2">
Dual Core2
</option>
<option value="AMD">
AMD
</option>
</optgroup>
</select>
<br>
<br>
Select Processor Speed : <select name="procSpeed" onblur="Speed()">
<optgroup label="CPU Speed">
<option value="1.4">
1.4Ghz
</option>
<option value="1.8">
1.8Ghz
</option>
<option value="2.0">
2.0Ghz
</option>
<option value="2.4">
2.4Ghz
</option>
</optgroup>
</select>
<br>
<br>
Choose your Hard Drive : <select name="HardDrive" onblur="hard_Drive()">
<optgroup label="Hard Drive">
<option value="80">
80 Gig
</option>
<option value="120">
120 Gig
</option>
<option value="160">
160 Gig
</option>
<option value="250">
250 Gig
</option>
</optgroup>
</select>
<h3><u>Optional Extras</u></h3>
<table>
<tr>
<td><input type="checkbox" name="Dvdrw" value="Dvd-rewriter"></td>
<td>Dvd-rewriter</td>
</tr>
<tr>
<td><input type="checkbox" name="Dvdrom" value="Dvd-rom"></td>
<td>Dvd-rom</td>
</tr>
<tr>
<td><input type="checkbox" name="CDrw" value="CD-rewriter"></td>
<td>CD-rewriter</td>
</tr>
<tr>
<td><input type="checkbox" name="CDrom" value="CD-rom"></td>
<td>CD-Rom</td>
</tr>
</table>
<br>
<br>
<!-- results area for both item selected and total cost --!>
Items Selected
<textarea name="itemSel" cols="10" rows="6">
</textarea>
<br>
<br>
<input type="text" size="8" name="totalSel"> <input type="button" value="Total" onclick="">
</form>
</body>
</html>