I have created a very simple calculator for the price of graden studio and I am want to replace the drop down to checkboxes and I would like the prices to be automatically created with out having to click the calculate button.

Any Help will be great.

Here is my javascript

Code:
function temp(form)
{
var l = parseFloat(form.Length.value, 10);
var w = parseFloat(form.Width.value, 10);
var lam = parseFloat(form.Laminate.value, 10);
var dec = parseFloat(form.Decking.value, 10);
var oak = parseFloat(form.oak.value, 10);
var bi = parseFloat(form.bifold.value, 10);
var open = parseFloat(form.oakopening.value, 10);
var slide = parseFloat(form.sliding.value, 10);
var pic = parseFloat(form.picture.value, 10);
var alopen = parseFloat(form.alopening.value, 10);
var elc = parseFloat(form.electric.value, 10);
var clad = parseFloat(form.cladding.value, 10);
var light = parseFloat(form.downlights.value, 10);
var fou = parseFloat(form.foundation.value, 10);
var del = parseFloat(form.delivery.value, 10);


var t = 0;
var sm = 0;    
sm = l * w;
et = (lam * sm) + dec + oak + bi + open + slide + pic + alopen + elc + (clad * sm) + light + del +fou;
bt = sm * 600 ;
vt = bt + et;
vit = vt * 1.2;
form.SquareM.value = sm;
form.StandardTotal.value = bt;
form.BasicTotal.value = bt;
form.ExtrasTotal.value = et;
form.VatTotal.value = vt;
form.VatInTotal.value = vit;
}
Here is my html

Code:
<form>
<p>
Enter Length: 
<input name="Length" value="0" maxlenght="15" size=15>
<p>
Enter Width: 
<input name="Width" value="0" maxlenght="15" size=15>
<p>
Square metres :
<input name="SquareM" readonly size=15>

<p>


&pound;
<input name="StandardTotal" readonly size=15> is the standard cost; now add in any optional extras from list below
</div>


<div class="content-noborder">

<h2>Standard Specification</h2>
<ul class="spec">
<li> <p>    Steel box base frame </p> </li>
<li> <p >   SIPS Wall construction 151mm</p></li>
<li> <p>    SIPS Floor construction</p> </li>
<li> <p>    SIPS Roof construction</p></li> 
<li> <p>    UPVC doors standard</p> </li>
<li> <p>    Plastered internal finish</p> </li>
<li> <p>    Or melamine internal finish</p> </li>
<li> <p>    Protected vapour barrier</p> </li>
<li> <p>    EPDM roof covering  </p> </li>
<li> <p>    Guttering and downpipe</p> </li>
<li> <p>    Pressure treated cladding</p></li>

<li> <p>    Carpet tiles </p></li>
<li> <p>Standard floor to eves height 2.5ms </p></li>
<li> <p>    Delivery to site free within 100mile <br/> radius of HD4 </p></li>
</ul>
<br />
</div>
<div class="content-noborder">
<h2>Optional Extras</h2>
<br/>
<div class="left">Laminate Flooring psm: </div>


<div class="right"><select name="Laminate" onChange="templ(this.form)"> <option value="0">No</option>  <option value="25">Yes</option>  </select></div>



<p>
<div class="left">0.5m deep front decking: </div>
<div class="right"><select name="Decking" onChange="templ(this.form)"> <option value="0">No</option>  <option value="275">Yes</option>  </select></div>

<p>
<div class="left">Oak Picture window 760 x 1950: </div>
<div class="right"><select name="oak" onChange="templ(this.form)"> <option value="0">No</option>  <option value="450">Yes</option>  </select></div>

<p>
<div class="left">Oak Bi-fold doors 1800 x 2100: </div>
<div class="right"><select name="bifold" onChange="templ(this.form)"> <option value="0">No</option>  <option value="1950">Yes</option>  </select></div>

<p>
<div class="left">Oak opening window 1200 x 795: </div>
<div class="right"><select name="oakopening" onChange="templ(this.form)"> <option value="0">No</option>  <option value="425">Yes</option>  </select></div>

<p>
<div class="left">Aluminium Sliding door 1800 x 2100: </div>
<div class="right"><select name="sliding" onChange="templ(this.form)"> <option value="0">No</option>  <option value="1500">Yes</option>  </select></div>

<p>
<div class="left">Aluminium picture window 760 x 2100 : </div>
<div class="right"><select name="picture" onChange="templ(this.form)"> <option value="0">No</option>  <option value="450">Yes</option>  </select></div>


<p>
<div class="left">Aluminium opening window 900 x 450 : </div>
<div class="right"><select name="alopening" onChange="templ(this.form)"> <option value="0">No</option>  <option value="425">Yes</option>  </select> </div>

<p>
<div class="left">Electric pack – lights, sockets, fuse box : </div>
<div class="right"><select name="electric" onChange="templ(this.form)"> <option value="0">No</option>  <option value="550">Yes</option>  </select> </div>


<p>
<div class="left">Western Red Cedar Cladding psm : </div>
<div class="right"><select name="cladding" onChange="templ(this.form)"> <option value="0">No</option>  <option value="35">Yes</option>  </select> </div>

<p>
<div class="left">Exterior downlights 4 : </div>
<div class="right"><select name="downlights" onChange="templ(this.form)"> <option value="0">No</option>  <option value="250">Yes</option>  </select> </div>

<p>
<div class="left">Foundations for steel box frame : </div>
<div class="right"><select name="foundation" onChange="templ(this.form)"> <option value="0">No</option>  <option value="550">Yes</option>  </select></div>

<p>
<div class="left">Delivery over 100m up to 300m radius : </div>
<div class="right"><select name="delivery" onChange="templ(this.form)"> <option value="0">No</option>  <option value="350">Yes</option>  </select> </div>
<br/>
<div class="left"><input name="calc" value="Calculate" type=button
onClick=temp(this.form)></div>

</div>
<div class="content-noborder-full">


<h2>
Total Standard Specification    &pound;
<input class="input-text-area" name="BasicTotal" readonly size=15>
<h2>
Total Optional Extras       &pound; 
<input class="input-text-area" name="ExtrasTotal" readonly size=15>
<h2>
Total for your Garden Room  &pound; 
<input class="input-text-area" name="VatTotal" readonly size=15>(exc vat)
<h2>
Total for your Garden Room  &pound;
<input class="input-text-area" name="VatInTotal" readonly size=15>(inc vat)
</form>