Custom Computer Ordering System,

DJ Stephen · Feb 18, 2006

Hi,

I am having trouble with some javascript and html, i want it so when someone chooses something off a list, a price at the bottom of the page updates itself for upgrades. all i know is i need a little javascript, but i dont know it.

My code so far is:

Code:

<!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=iso-8859-1">
<title>SR COMPUTERS INTEL PACKAGES ORDER</title>

</head>
<body bgcolor="#3399FF">
<center>
<h3><u>Order Home Package</u></h3></center>
<p>The base price with no extras for this package is Â£470</p><br>
<p>To order a computer please fill in the form below and you will recieve and email back within 48 Hours with order conformation and order final price and a link to pay for your order.</p>
<h4>Choose any Upgrades you want:</h4>
<p>Please note if you purchase and upgrades the packages default item will not be included and replaced with the upgraded part.</p>
<form method="POST" action="thanks.php" name="Order Home Package">
<input type="TEXT" name="name" value="Enter Name">
<input type="TEXT" name="email" value="Enter Email Address">
<h5>CD Drive Upgrades:</h5>
<form method="post" action="thanks.php" name="CD Drive Upgrades">
<select name="CD Drive Upgrade">
<option value="No Upgrades">No Upgrades
<option value="1 X DVD-RW All Formats">1 X DVD-RW All Formats [Add Â£25]
<option value="2 X DVD-RW All Formats">2 X 1 X DVD-RW All Formats [Add Â£35]
</select>
<h5>Memory Upgrades:</h5>
<form method="post" action="thanks.php" name="Memory Upgrades></form>">
<select name="Memory Upgrades">
<option value="No Upgrades">No Upgrades
<option value="2 x 512MB - 1GB Memory [Add Â£30]">2 x 512MB - 1GB Memory [Add Â£30]
<option value="2 x 1GB - 2GB Memory [Add Â£60]">2 x 1GB - 2GB Memory [Add Â£60]
<option value="Degrade Memory to 256MB [Take Â£15]">Degrade Memory to 256MB [Take Â£15]
</select>
<h5>Case Upgrades:</h5>
<form method="post" action="thanks.php" name="Case Upgrades></form>">
<select name="Case Upgrades">
<option value="No Upgrades">No Upgrades
<option value="See Through Window [Add Â£20]">See Through Window [Add Â£20]
<option value="See Through Window and Cold Cathode CCFL Lights [Add Â£35]">See Through Window and Cold Cathode CCFL Lights [Add Â£35]
</select>
<h5>Hard Disk Upgrades:</h5>
<form method="post" action="thanks.php" name="Hard Disc Upgrades></form>">
<select name="Hard Disk Upgrades">
<option value="No Extras">No Extras
<option value="120GB Hard Disk [Add Â£20]">120GB Hard Disk [Add Â£20]
<option value="160GB Hard Disk [Add Â£35]">160GB Hard Disk [Add Â£35]
</select>
<h5>Networking Upgrades:</h5>
<form method="post" action="../Website/steve/thanks.php" name="Networking Upgrades></form>">
<select name="Networking Upgrades">
<option value="No Extras">No Extras
<option value="Gigabit Ethernet [Add Â£35]">Gigabit Ethernet [Add Â£35]
<option value="Built In Wireless [Add Â£35]">Built In Wireless [Add Â£35]
</select>
<br>

<br>
<br>
<input type="SUBMIT" name="Submit" value="Submit" src="../Website/steve/thanks.php">
<input type="RESET" name="Reset">
</form>
</body>
</html>

Thanks
Steven

root · Feb 18, 2006

ummm...
I think I know what you mena..
but try this

Code:

<html>
<script>
update_price()
{
  var cost = 0;
  if (document.form1.processor.value == "2") {then cost = cost + 50; }
  if (document.form1.processor.value == "2.5") {then cost = cost + 60; }
  if (document.form1.processor.value == "3") {then cost = cost + 70; }
  if (document.form1.ram.value == "256") {then cost = cost + 50; }
  if (document.form1.ram.value == "512") {then cost = cost + 75; }
  document.form1.total.value = cost;
}
</script>
<body>
<form name="form1" method="post">
<select name="Processor" onchange="update_price();">
  <option value="2">2 GHz</option>
  <option value="2.5">2.5 GHz</option>
  <option value="3">3 GHz</option>
</select>
<select name="ram" onchange="update_price();">
  <option value="256">256 MB</option>
  <option value="512">512 MB</option>
</select>
<input type="text" name="total" />
<submit>
</form>
</body>

vague... but I hope you get the idea...

you could also have to total in a changable div and have it also stored in a hidden form element, as you can of course, (when using an input box) change the total value.

DJ Stephen · Feb 18, 2006

Thanks for the info root, your a saviour, i get the code.

Custom Computer Ordering System,

DJ Stephen

Fully Optimized

root

Site Team

DJ Stephen

Fully Optimized

Similar threads