Networking | Hardware | Software | Multimedia | System | Unix&Linux | MBA

Home>>Hardware>>Help with an online order form using drop down boxes

Help with an online order form using drop down boxes

letenn
11-23-2004, 04:22 AM
Hello: I am having problem getting an online order form to work. I am using drop down lists for selectable options. Here is the code and keep in mind it's basic until I get it to work. Thanks in advance.

<html>
<head>

<script language = "javascript">

function pricecalculate(){
Var cpu=eval(document.compbuilder.cpu.value);
Var Mboard=eval(document.compbuilder.mboard.value);

document.compbuilder.txtAnswer.value=cpu + mboard;
}
</script>

</head>
<body>

<form name=compbuilder onSubmit="pricecalculate();">
<table>
<tr>
<td>Build a computer</td>
</tr>

<tr>
<td><p>Step 1: Select the CPU:</p></td>
<td> <select name=cpu>
<option value=75>AMD = $75.00
<option value=100>Intel = $100.00
</Select>
</td>
</tr>

<tr>
<td><p>Step 2: Select your Motherboard:</p></td>
<td><select Name=mboard>
<option value=75>Soyo = $75.00
<option value=100>DFI = $100.00
</select>
</td>
</tr>

<tr>
<td><p>Step 3: Click to calculte the price:</p></td>
<td><input type=submit name=calculate value="calculate"></td>
</tr>

<tr>
<td><p>The estimated price of your systems is:</P></td>
<td><input type=text name=txtAnswer></td>
</tr>

</table></form>

</body>
</html>
Brandoe85
11-23-2004, 05:14 AM
Variables begin with var blah, small 'v'. I'm not sure if you want the form to submit when your just displaying their price.

<html>
<head>

<script language = "javascript">

function pricecalculate(){
var cpu=eval(document.compbuilder.cpu.value);
var Mboard = eval(document.compbuilder.mboard.value);

document.compbuilder.txtAnswer.value=cpu + Mboard;
}
</script>

</head>
<body>

<form name=compbuilder action="">
<table>
<tr>
<td>Build a computer</td>
</tr>

<tr>
<td><p>Step 1: Select the CPU:</p></td>
<td> <select name=cpu>
<option value=75>AMD = $75.00
<option value=100>Intel = $100.00
</Select>
</td>
</tr>

<tr>
<td><p>Step 2: Select your Motherboard:</p></td>
<td><select Name=mboard>
<option value=75>Soyo = $75.00
<option value=100>DFI = $100.00
</select>
</td>
</tr>

<tr>
<td><p>Step 3: Click to calculte the price:</p></td>
<td><input type=button name=calculate value="calculate" onClick="pricecalculate();"></td>
</tr>

<tr>
<td><p>The estimated price of your systems is:</P></td>
<td><input type=text name=txtAnswer></td>
</tr>

</table></form>

</body>
</html>
hemebond
11-23-2004, 05:34 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>47873</title>
<style type="text/css">
dt {
float:left;
width:11em;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Build a computer</legend>

<dl>
<dt><label for="cpu">Select the CPU</label></dt>
<dd>
<select id="cpu" name="cpu" onchange="calculate()">
<option value="75">AMD = $75.00</option>
<option value="100">Intel = $100.00</option>
</select>
</dd>

<dt><label for="mboard">Select your Motherboard</label></dt></dt>
<dd>
<select id="mboard" name="mboard" onchange="calculate()">
<option value="75">Soyo = $75.00</option>
<option value="100">DFI = $100.00</option>
</select>
</dd>
</dl>
</fieldset>
</form>

<p>The estimated price of your systems is $<span id="price">uncalculated</span></p>

<script type="text/javascript">
var price = document.getElementById("price").firstChild;

function calculate()
{
var cpu = Number(document.getElementById("cpu").value);
var mboard = Number(document.getElementById("mboard").value);

price.nodeValue = cpu + mboard;
}

calculate();
</script>
</body>
</html>
letenn
11-23-2004, 10:20 PM
Thanks for the replies guys. Could you tell me what I did wrong with the one I did? Or is mine not salvageable? I am trying to learn this stuff so I need to take it slow. Thanks again for the replies..
Brandoe85
11-24-2004, 12:20 AM
I tried to make mine as much like yours as possible.

<html>
<head>

<script language = "javascript">

function pricecalculate(){
-->should be lower case 'v' Var cpu=eval(document.compbuilder.cpu.value);
-->lower case Var Mboard=eval(document.compbuilder.mboard.value);

document.compbuilder.txtAnswer.value=cpu + --> should be same as you declared which was Mboard, mboard;
}
</script>

</head>
<body>

<form name=compbuilder -->no need to submit when your just displaying the cost onSubmit="pricecalculate();">
<table>
<tr>
<td>Build a computer</td>
</tr>

<tr>
<td><p>Step 1: Select the CPU:</p></td>
<td> <select name=cpu>
<option value=75>AMD = $75.00
<option value=100>Intel = $100.00
</Select>
</td>
</tr>

<tr>
<td><p>Step 2: Select your Motherboard:</p></td>
<td><select Name=mboard>
<option value=75>Soyo = $75.00
<option value=100>DFI = $100.00
</select>
</td>
</tr>

<tr>
<td><p>Step 3: Click to calculte the price:</p></td>
<td><input type=-->use button, not submit submit name=calculate value="calculate" use the onClick="pricecalculate();"></td>
</tr>

<tr>
<td><p>The estimated price of your systems is:</P></td>
<td><input type=text name=txtAnswer></td>
</tr>

</table></form>

</body>
</html>
 

TOP

For more info

•setting a minimum size
•Auto Preview of Image 
•Refresh with a query s
•JS Validation obsolete
•Javascript Pop up func
•Slide show transitions
•I'm a newbie...please!
•how to write coding in
•Advanced Debug Info 
•.js file doesn't work 

News Archive

•Adding Graphic To Text
•re-direct form after s
•pop up window controls
•Clock on homepage - He
•passing a param from a
•Password Procection wi
•document.title in same
•focus onload 
•Counting Wrong from Ri
•Help needed on how to 

Related stories:

•Drag n drop Thumbnail Images to iFrame, with Original Size
•Check to see if a page exists in Javascript.
•variable scope
•absolutely positioned scrollable area code wont work for me...
•multiple slideshows on one page with linkable pics?
•Math
•Get an Error I don't recognize?

Copyright@2004-2005 www.zzcoke.com All Right Reserved

advanced web statistics