Help a newbie with a form-based calculator

I'm completely and totally new to Javascript, though I know BASIC (TI-82 flavor :p ) and did a few small programs in REALbasic.

I'm trying to create a calculator for a website that will take values inserted into form boxes, perform a mathematical operation, then return that variable to a different box.

The script is to calculate an estimated cost of putting in a patio--there are boxes for length, width, shape, and paver type. The "Shape" box has options for "round", "rectangle", or other. If it's "other", the total cost should be increased by 15%. Paver type is either "basic", "mid-range", or "high end", where the area is multiplied by a different number for each one.

I know nothing of JavaScript, but if it were in BASIC (combining TI-82 with REALbasic, as TI-82 doesn't have forms.. ), it'd look something like this: (Maybe it will help someone understand what I'm trying to do)

length.text*width.text=a
a*x(cost of base)=b

If paver.text="basic"
then
(a*1)+b=c
end

If paver.text="mid-range"
then
(a*2)+b=c
end

If paver.text="high end"
then
(a*3)+b=c

If shape.text /= (unequal to) "rectangle"
then
c*1.15=c

total.text=c


That's the sorta-kinda way I would do it, combining two variants of BASIC. Can someone help me figure out how to do this in Javascript? I'm reading tutorials, but still haven't found what I need.

This is where I'm at in understanding this so far (I'll edit this post as I go so this doesn't get 10 miles long):

I know that the multiplying part is wrong, or at least something, as it doesn't work when I put it into GoLive.


<form name="patio">
<input type="text" size="12" value="length" name="length">
<input type="text" size="12" value="width" name="width">
<input type="text" size="12" value=" " name="estimate">
<input type="button" value="Estimate" name="calculate" onclick="estimator ()">
</form>

<script>
function estimator ()
{
var area=document.patio.length.value*document.patio.width.value
var subbase=area*1.8
var labor=area*5.15
var total=subbase+labor

document.patio.estimate.value=total <-- I don't think this is right

}
</script>

"length" is a reserved word in JavaScript, meaning the length of the field in characters.

This seems to work:-

<form name="patio">
<input type="text" size="12" name="plength">
<input type="text" size="12" name="pwidth">
<input type="text" size="12" name="pestimate">
<input type="button" value="Estimate" name="calculate" onclick="estimator ()">
</form>

<script>
function estimator ()
{
var area=document.patio.plength.value*document.patio.pwidth.value
alert (area)
var subbase=area*1.8
var labor=area*5.15
var total=subbase+labor

document.patio.pestimate.value=total;

}
</script>
</form>

Thanks a lot! I got it to work, and you can see the finished product at www.mllandscaping.com/Estimator.html . It's pretty good for my first time! :)

Yes, I agree. Your site is indeed pretty good for a first attempt. Also, the ability for the client to obtain a rough estimate of cost is extremely useful, and ought to help genarate sales and at the same time avoid time-wasters.

This is far more intelligent than most of the clever but pointless bells, whistles and flashing lights which so many sites use.

Good luck!