JavaScript Forum

**hutch3912** · 01-19-2007, 08:35 AM

The user inputs the total lineal footage for the bottom set of cabinets and the bottom. I need to multiply that by the cost per lineal foot and add in the cost of the different door styles.

<html>
<head>
<title>Cabinet Price Calculator</title>

<script type="text/javascript">// <![CDATA[

function calculate_total(formObj){
var bottom = new Number(formObj.bottom.value);
var top = new Number(formObj.top.value);
var door = 0;
var opts = formObj.door.options;
for(var i=0; i<opts.doorstyle;i++){
if(opts[i].selected){
door = new Number(opts[i].value);
}
}
var linealfootage = top + bottom ;
var price = linealfootage * 313 + door;
formObj.total.value = price;
}
// ]]></script>
</head>
<body>

<form name="calc" id="calc">
<div>
<label for="bottom">Total Lineal Footage Bottom Cabinets:</label>
<input type="text" name="bottom" onchange="calculate_total(this.form)" />
</div>
<div>
<label for="Top">Total Lineal Footage Top Cabinets:</label>
<input type="text" name="top" onchange="calculate_total(this.form)" />
</div>
<div>
<label for="doorstyle">Door Style</label>
<select name="doorstyle" onchange="calculate_total(this.form)">
<option value="0" selected>Select a Door Style</option>
<option value="1"> Inset</option>
<option value="2500"> 3/8 Inch Inset</option>
<option value="2500">Bead Set</option>
</select>
</div>

<SCRIPT language="JavaScript">
document.write("Total= " + price + "");
</SCRIPT>
</div>
</form>

</body>
</html>

**willcode4beer** · 01-19-2007, 10:45 AM

This looks amazingly similar o this post
http://www.webmaster-talk.com/javasc...r-in-java.html

Lets just go through the code:
On the line where you try to get the options:
var opts = formObj.door.options;
there is a reference to a form item with the id door, but, it does not exist in your form. I think you meant to say
var opts = formObj.doorstyle.options;
here.
Next, in the for loop definition
for(var i=0; i<opts.doorstyle;i++){
There is no doorstyle in the options. you really just want to simply loop through the options (and set the uper limit to the length of the options).
for(var i=0; i<opts.length;i++){

Next up, the test for the selected item:
if(opts[i].selected){
always stops on the first option in the list because the html for the option specifies that it is selected. The fix for this is, either start the for loop at 1 or removed the selected attribute for the option tag. Either is fine.

The last thing in your javascript is: formObj.total.value = price;
However, you don't have a form field with an id of price in your form. So, you'll need to add it. The document.write at the bottom isn't going to do much for you either. Just replace it with the form field for the total.

Here is some revised code to get you going:

Code:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Cabinet Price Calculator</title>

<script type="text/javascript">// <![CDATA[
function calculate_total(formObj){
    var bottom = new Number(formObj.bottom.value);
    var top = new Number(formObj.top.value);
    var door = 0;
    var opts = formObj.doorstyle.options;
    for(var i=1; i<opts.length; i++){
        if(opts[i].selected){
            door = new Number(opts[i].value);
        }
    }
    var linealfootage = top + bottom ;
    var price = linealfootage * 313 + door;
    formObj.total.value = price;
}
// ]]></script>
</head>

<body>

<form name="calc" id="calc">
<div>
    <label for="bottom">Total Lineal Footage Bottom Cabinets:</label>
    <input type="text" name="bottom" onchange="calculate_total(this.form)" />
</div>
<div>
    <label for="Top">Total Lineal Footage Top Cabinets:</label>
    <input type="text" name="top" onchange="calculate_total(this.form)" />
</div>
    
<div>
<label for="doorstyle">Door Style</label>
    <select name="doorstyle" onchange="calculate_total(this.form)">
    <option value="0" selected="selected">Select a Door Style</option>
    <option value="1">Inset</option>
    <option value="2500">3/8 Inch Inset</option>
    <option value="2500">Bead Set</option>
</select>
</div>

<div>
    <label for="total">Total = </label>
    <input type="text" name="total" id="total" />
</div>

</form>

</body>
</html>

Hope that helps

**funkdaddu** · 01-19-2007, 10:52 AM

Because:
1) your document.write("Total= " + price + ""); is being called as the page is written, not after the user changes the values, so that will do nothing.

2) your script is referencing objects that are either invalid or don't exist on the page (formObj.door,formObj.total,opts.doorstyle)

Also, it calculates even if "doorstyle" is 0 which returns some funky results... try this:

HTML Code:

<html>

	<head>
		<title>Cabinet Price Calculator</title>
		<script type="text/javascript">// <![CDATA[

function calculate_total(formObj){
	var bottom = new Number(formObj.bottom.value);
	var top = new Number(formObj.top.value);
	var door = new Number(formObj.doorstyle.value);
	var linealfootage = top + bottom ; 
	var price = linealfootage * 313 + door;
	formObj.total.value = price;
	
}
// ]]></script>
	</head>

	<body>
		<form id="calc" name="calc">
			<div>
				<label for="bottom">Total Lineal Footage Bottom Cabinets:</label> <input type="text" name="bottom" value="0" onchange="calculate_total(this.form)"></div>
			<div>
				<label for="Top">Total Lineal Footage Top Cabinets:</label> <input type="text" name="top" value="0" onchange="calculate_total(this.form)"></div>
			<div>
				<label for="doorstyle">Select a Door Style</label> <select name="doorstyle" onchange="calculate_total(this.form)">
					<option value="1" selected>Inset</option>
					<option value="2500">3/8 Inch Inset</option>
					<option value="2500">Bead Set</option>
				</select></div>
			<div>
				<label for="total">Total lineal footage:</label> <input type="text" name="total" value="0"></div>
		</form>
	</body>

</html>