I did think to set the default values to '0' right after I sent you the code. When I tried to use the code you showed me it didn't work. I probably took a really wrong approach. I really am interested in learning though. I signed up for java, jquery and c+ at the local college here. Maybe I can learn enough to help myself. Sorry to bother.
Here's what I did...
Code:
<div id="main">
<div id="content" >
<div class="block-wrapper" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>PSD to HTML Order Form</title>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">google.load("jquery", "1")</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function()
{
var total = 0;
function calcTotal()
{
$("input:checked").each(function()
{
var value = $(this).attr("value");
total += parseInt(value);
});
$("select").change(function()
{
var value = $(this).attr("value");
total += parseInt(value);
});
}
calcTotal();
$("input:checkbox, input:radio").click(function()
{
total = 0;
calcTotal();
$("p.total").html("<strong>Total: $" + total + "</strong>");
});
});
</script>
<style>
body {
color: #222;
font-family: "Helvetica Neue Light", Arial, Helvetica, sans-serif;
}
h1 {
font-weight: normal;
}
input:hover {
color: #000;
}
label {
color: #fff;
}
fieldset {
font-family: Futura, Arial, Helvetica, sans-serif;
background: url('http://www.archtronics.com/main/wp-content/themes/archtheme/images/darkwood.jpg');
border: 2px #3F0 solid;
color: #333;
margin: opx;
}
legend {
background-color:#555;
color: #fff;
font-size: 22px;
padding: 5px 5px 5px 5px;
margin: 0px;
font-weight: bold;
}
p.total {
color: #fff;
font-size: 18px;
padding: 0 10px;
margin-left: 0;
font-weight: bold;
}
input {margin-right: 0;}
p.total {
margin-left: 10px;
}
p.total strong {
color: #3F0;
font-size: 28px;
font-family: Eurostile, Arial, Helvetica, sans-serif;
}
input#submit {
color: #000;
font-size: 18px;
background-color: #D4FFEE;
border: 2px #499483 solid;
padding: 10px;
}
input#submit:hover {
cursor: pointer;
background-color:#5BB470;
}
</style>
</head>
<div class="block-col_4" >
<br /><br />
<form action="process.php" method="post" class="quote">
<div class="block-col_4" ><p class="total"><strong>Total: $0</strong></p></div>
<br /><br />
<fieldset id="packages">
<legend>Website Design</legend>
<p>
<label for="pages">How many pages do you need?</label>
<input name="pages" type="radio" value="0" checked="checked" />
<label>none</label>
<input name="pages" type="radio" value="75" />
<label>1-5</label>
<input name="pages" type="radio" value="100" />
<label>6-10</label>
<input name="pages" type="radio" value="150" />
<label>11-15</label>
<input name="pages" type="radio" value="170" />
<label>15-20</label>
<input name="pages" type="radio" value="200" />
<label>21-25</label>
</p>
<p>
<label for="email">How many email accounts do you need?</label>
<select name="email">
<option value="0"> 0 </option>
<option value="3"> 1 </option>
<option value="6"> 2 </option>
<option value="9"> 3 </option>
<option value="12"> 4 </option>
<option value="15"> 5 </option>
<option value="18"> 6 </option>
<option value="21"> 7 </option>
<option value="24"> 8 </option>
<option value="27"> 9 </option>
<option value="30"> 10 </option>
<option value="33"> 11 </option>
<option value="36"> 12 </option>
<option value="39"> 13 </option>
<option value="42"> 14 </option>
<option value="45"> 15 </option>
<option value="48"> 16 </option>
<option value="51"> 17 </option>
<option value="54"> 18 </option>
<option value="57"> 19 </option>
<option value="60"> 20 </option>
</select>
</p>
<p>
<label for="cms">Will you need a CMS?</label>
<input type="radio" name="cms" value="200" />
<label>Yes</label>
<input type="radio" name="cms" value="0" checked="checked"/>
<label>No</label>
</p>
</fieldset>
</div>
<div class="block-col_4" ></div>
<div class="block-col_2" >
<fieldset id="graphic_design">
<legend>Graphic Design Services</legend>
<p>
<label for="email_amt">How many custom graphics will you need?</label>
<select name="email_amt">
<option value="0"> 0 </option>
<option value="10"> 1 </option>
<option value="20"> 2 </option>
<option value="30"> 3 </option>
<option value="40"> 4 </option>
<option value="50"> 5 </option>
<option value="60"> 6 </option>
<option value="70"> 7 </option>
<option value="80"> 8 </option>
<option value="90"> 9 </option>
<option value="100"> 10 </option>
<option value="110"> 11 </option>
<option value="120"> 12 </option>
<option value="130"> 13 </option>
<option value="140"> 14 </option>
<option value="150"> 15 </option>
<option value="160"> 16 </option>
<option value="170"> 17 </option>
<option value="180"> 18 </option>
<option value="190"> 19 </option>
<option value="200"> 20 </option>
</select>
</p>
<p>
<label for="content">Will you need content written for your site?</label>
<input name="content" type="radio" value="100" />
<label>Yes</label>
<input name="content" type="radio" value="0" checked="checked"/>
<label>No</label>
</p>
</fieldset>
</div>
<div class="block-col_2" >
<fieldset id="Photography">
<legend>Photography Services</legend>
<p>
<label for="photo">Will you need Photography service?</label>
<input name="photo" type="radio" value="100" />
<label>Yes</label>
<input name="photo" type="radio" value="0" checked="checked"/>
<label>No</label>
<br />
<label for="photo-hours">How many hours will you need the photographer?</label>
<input name="photo-hours" type="radio" value="0" checked="checked" />
<label>none</label>
<input name="photo-hours" type="radio" value="50" />
<label>1 hour</label>
<input name="photo-hours" type="radio" value="80" />
<label>2 hours</label>
<input name="photo-hours" type="radio" value="110" />
<label>3 hours</label>
</p>
</fieldset>
</div>
<div class="block-col_4" ></div>
<div class="block-col_2" >
<fieldset id="print_design" >
<legend>Print Design Services</legend>
</fieldset>
</div>
<div class="block-col_2" >
<fieldset id="domain_hosting" >
<legend>Domain & Hosting</legend>
<p>
<label for="domain">Will you need a domain name?</label>
<input type="radio" name="domain" id="domain" value="10">
<label>Yes</label>
<input type="radio" name="domain" id="domain" value="0" checked="checked">
<label>No</label>
</p>
<p>
<label for="hosting">Will you need hosting?</label>
<input type="radio" name="hosting" id="hosting" value="9">
<label>Yes</label>
<input type="radio" name="hosting" id="hosting" value="0" checked="checked">
<label>No</label>
<br />
<label for="hosting_years">How many years of hosting do you want?</label>
<input name="hosting_years" type="radio" value="0" checked="checked" />
<label>none</label>
<input name="hosting_years" type="radio" value="75" />
<label>1 year</label>
<input name="hosting_years" type="radio" value="150" />
<label>2 years</label>
<input name="hosting_years" type="radio" value="175" />
<label>3 years</label>
<input name="hosting_years" type="radio" value="200" />
<label>4 years</label>
</p>
</fieldset>
</div>
<div class="block-col_4" ></div>
<div class="block-col_4" >
<fieldset id="contact_info" >
<legend>Contact Information</legend>
<div class="block-col_2" style="width: 425px;">
<p>
<label for="first_name">First Name:</label>
<input name="first_name" type="text" />
</p>
<p>
<label for="last_name">Last Name:</label>
<input name="last_name" type="text" />
</p>
<p>
<label for="phone">Phone Number:</label>
<input name="phone" type="text" />
</p>
<p>
<label for="email">Email address:</label>
<input name="email" type="text" />
</p>
</div>
<div class="block-col_2" style="width: 425px;">
<p>
<label for="address">Address:</label>
<input name="address" type="text" /><br />
</p>
<p>
<label for="city">City:</label>
<input name="city" type="text" /><br />
</p>
<p>
<label for="state">State:</label>
<input name="state" type="text" /><br />
</p>
<p>
<label for="zip">Zip Code:</label>
<input name="zip" type="text" /><br />
</p>
<input name="ourmail" type="hidden" value="sales@archtronics.com" />
<br />
<input type="hidden" name="mailcc" id="mailcc" value="000">
</p>
</div>
</fieldset>
</div>
<br />
<div class="block-col_4" >
<p class="total"><strong>Total: $0</strong></p><br /><br />
<p ><input id="submit" type="submit" value="Send my quote" title="This will send your quote to the email address that you provided in the contact information section of the form" ></p>
</form>
</div>
</div>
</div>
</div>