<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> HTML and JavaScript </title>
<script type="text/javascript">

function towerPic()
{

}
function doClear()
{
document.AddressForm.customer.value = "";
document.AddressForm.address.value = "";
document.AddressForm.city.value= "";
document.AddressForm.state.value = "";
document.AddressForm.zip.value = "";
document.AddressForm.phone.value= "";
document.AddressForm.email.value= "";
document.AddressForm.total.value= "0.00";

document.ComputerForm.cases[0].checked = false;
document.ComputerForm.cases[1].checked = false;
document.ComputerForm.cases[2].checked = false;

document.ComputerForm.monitors[0].checked = false;
document.ComputerForm.monitors[1].checked = false;
document.ComputerForm.monitors[2].checked = false;

document.ComputerForm.printers[0].checked = false;
document.ComputerForm.printers[1].checked = false;
document.ComputerForm.printers[2].checked = false;

return;
}



</script>


</head>

<body> <h1 align="center">Computer System Order Form</h1> <table border="black" cellpadding="10px" align="center">
<tr>
<td>
<table cellpadding="10px">
<form name="ComputerForm">
<tr>
<td>
Computer Case Style:</br>
<input type="radio" onclick="towerPic()" name="cases" id="desktop" value="500.00" /> Desktop Case (500.00) </br>
<input type="radio" onclick="towerPic()" name="cases" id="mini" value="600.00" /> Mini-Tower Case (600.00) </br>
<input type="radio" onclick="towerPic()" name="cases" id="full" value="700.00" /> Full-Tower Case (700.00) </br>
</td>
<td>
<img src="tower1.jpg" width="125" height = "125" id="pcCase" >
</td>
</tr>
<tr>
<td>
Computer Monitor: <br/>
<input type="radio" name="monitors" value="250.00" /> 17" LCD Flat Screen (250.00) </br>
<input type="radio" name="monitors" value="300.00" /> 19" LCD Flat Screen (300.00) </br>
<input type="radio" name="monitors" value="350.00" /> 21" LCD Flat Screen (350.00) </br>
</td>
<td>
<img src="monitor1.jpg" width="125" height = "125" alt="pc monitor" />
</td>
</tr>
<tr>
<td>
Computer Printer:<br/>
<input type="radio" name="printers" value="100.00" /> Inkjet Printer (100.00) </br>
<input type="radio" name="printers" value="250.00" /> Laser Printer (250.00) </br>
<input type="radio" name="printers" value="350.00" /> Color Printer (350.00) </br>
</td>
<td>
<img src="printer1.jpg" width="125" height = "125" alt="pc printer" />
</td>
</tr>
</form>
</table>
</td>
<td>
<table padding="10px">
<tr>
<form name="AddressForm">
<td>
Total System Price:
</td>
<td>
$<input type="text" name="total" readonly value="0.00" size="8">
</td>
</tr>
<tr>
<td>
&nbsp;
</td>
</tr>
<tr>
<td>
&nbsp;
</td>
</tr>
<tr>
<td>
&nbsp;
</td>
</tr>
<tr>
<td>
Full Name:
</td>
<td>
<input type="text" name="customer" />
</td>
</tr>
<tr>
<td>
Street Address:
</td>
<td>
<input type="text" name="address" />
</td>
</tr>
<tr>
<td>
City:
</td>
<td>
<input type="text" name="city" />
</td>
</tr>
<tr>
<td>
State:
</td>
<td>
<input type="TEXT" name="state" size="2">
</td>
</tr>
<tr>
<td>
Zip:
</td>
<td>
<input type="text" name="zip" />
</td>
</tr>
<tr>
<td>
Phone Number:
</td>
<td>
<input type="text" name="phone" />
</td>
</tr>
<tr>
<td>
Email Address:
</td>
<td>
<input type="text" name="email">
</td>
</tr>
</form>
<tr>
<td>
&nbsp;
</td>
</tr>
<tr>
<td>
<input type="button" value="Submit Order" onClick="doSubmit()" />
</td>
<td>
<input type="button" value="Clear Form" onClick="doClear()" />
</td>
</tr>
</table>
</td>
</tr>
</table>

</body>
</html>



I am currently working on a project for a class. I am coding a computer order form and so far everything is working, except when someone chooses a certain tower,monitor, or printer it is suppose to change the picture to the current choice. I can't seem to figure this out so any help would be appreciated! Also this is the first forum i have every used so if i am in the wrong place, please let me know.