Jump to content

problems calculating an amount on a form

pafruu

By pafruu
in JavaScript

Recommended Posts

pafruu Newbie

pafruu

Posted
Posted

Hello, I'm very new to javascript and I am trying to create an order form for model bases. The way it should work is that you would have to select the width and the height of the base and the quality of wood of which you would want it built. I got the square footage to work its just the calculation of the price of which I have a problem. You see, if you select mdr, the square footage would be multiplied by a quarter and if you choose hardwood, it should be multiplied by a dollar. Now I've created a switch but no matter waht it always calculates the square foot by a quarter. What am I missing??heres the code:

<!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>order form</title><script language='JavaScript'> function count(){ var w = document.getElementById("width").value; var h = document.getElementById("height").value; var mat = document.getElementById("mat").value; var Area = h * w; switch (mat) { case "mdf": var sum = Area * 0.25; break; case "hard": var sum = Area * 1.00; break; } document.getElementById("total").innerHTML = sum;return sum;} </script> </head><body><table width="50%" border="2"> <tr><td> <FORM name="orderForm" ACTION="" METHOD="POST" onSubmit="return CheckInput(this)" > <input type=hidden name="subject" value="Order Form"> <input type=hidden name="recipient" value="design@girvanmedia"> <input type=hidden name="redirect" value=""> <table> <!--INNER TABLE--> <tr><td colspan="2" align="center"><font size="4">Fill out our order form</font><br /><hr /></td></tr> <tr><td width="35%">Size:</td> <td>width: <select name="width" size="1" id="width" onFocus="window.status='4"'" onBlur="window.status=' '" onChange="count();"> <option selected value="4">4"</option> <option value="5">5"</option> <option value="6">6"</option> <option value="7">7"</option> <option value="8">8"</option> <option value="9">9"</option> <option value="10">10"</option> <option value="11">11"</option> <option value="12">12"</option> <option value="13">13"</option> <option value="14">14"</option> <option value="15">15"</option> <option value="16">16"</option> <option value="17">17"</option> <option value="18">18"</option> <option value="19">19"</option> <option value="20">20"</option> <option value="21">21"</option> <option value="22">22"</option> <option value="23">23"</option> <option value="24">24"</option> </select> height: <select name="height" id="height" size="1" onFocus="window.status='4"'" onBlur="window.status=' '" onChange="count();"> <option selected value="4">4"</option> <option value="5">5"</option> <option value="6">6"</option> <option value="7">7"</option> <option value="8">8"</option> <option value="9">9"</option> <option value="10">10"</option> <option value="11">11"</option> <option value="12">12"</option> <option value="13">13"</option> <option value="14">14"</option> <option value="15">15"</option> <option value="16">16"</option> <option value="17">17"</option> <option value="18">18"</option> <option value="19">19"</option> <option value="20">20"</option> <option value="21">21"</option> <option value="22">22"</option> <option value="23">23"</option> <option value="24">24"</option> </select> </td> <td style="padding-left:10px;"><b>Total:</b> $<span id="total">0.00</span></td></tr> <tr><td colspan="2"><font size="1"> </font></td></tr> <tr> <td>Material:</td> <td><font size="1"> <br></font> <input type="radio" name="mat" id="mat" value="mdf" onChange="count();">MDF <input type="radio" name="mat" id="mat" value="hard" onChange="count();">Hardwood </td></tr> <tr> <td>Profile: </td> <td><font size="1"> <br></font> <input type="radio" name="prof" value="A">A <input type="radio" name="prof" value="B">B <input type="radio" name="prof" value="C">C <input type="radio" name="prof" value="D">D </td></tr> <tr> <td>Finish: </td> <td><font size="1"> <br></font> <input type="radio" name="fini" value="A">A <input type="radio" name="fini" value="B">B <input type="radio" name="fini" value="C">C <input type="radio" name="fini" value="D">D </td></tr> <tr> <td>Type: </td> <td><font size="1"> <br></font> <input type="radio" name="type" value="A">A <input type="radio" name="type" value="B">B </td></tr> <!--end INNER TABLE--> </table> </FORM> </body></html>
Please help a n00b :)
Link to comment
Share on other sites
jesh Devoted Member

jesh

Posted
Posted

One of the problems is that you have two elements with the same ID. You should only ever have one element on a page with any given ID.Here is your java script:

var mat = document.getElementById("mat").value;

And your HTML:

<input type="radio" name="mat" id="mat" value="mdf" onChange="count();">MDF<input type="radio" name="mat" id="mat" value="hard" onChange="count();">Hardwood

Another problem is that you are just getting the value of the radio button - which will always be "mdf" regardless of whether or not it's checked. You might try looking for the checked state instead:

if(document.getElementById("mat_mdf").checked == true){}

<input type="radio" name="mat" id="mat_mdf" value="mdf" onChange="count();">MDF<input type="radio" name="mat" id="mat_hard" value="hard" onChange="count();">Hardwood

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...