I am trying to build an online quote form. I have very limited knowledge of JS therefore I am trying to make it really simple so I can edit it later when needed.
I have been able to get the JS to recognize the check-box and radio inputs but I cant figure out how to get it to see the drop-down selection input. I have tried to research online but everything I have tried so far doesn't work.
Here is the code:
Code:
<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()
{
//This happens for each checked input field
var value = $(this).attr("value");
total += parseInt(value);
});
}
calcTotal();
$("form").before('<p class="total">Total: <strong>' + total + '</strong></p>');
$(":submit").before('<p class="total">Total: <strong>' + total + '</strong></p>');
$("input:checkbox, input:radio").click(function()
{
total = 0;
calcTotal();
$("p.total").html("Total: <strong>" + total + "</strong>");
});
});
</script>
<style>
body {
color: #222;
font-family: "Helvetica Neue Light", Arial, Helvetica, sans-serif;
}
#wrapper {
width: 720px;
margin: 0 auto;
}
h1 {
font-weight: normal;
}
ol {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
margin: 5px 2px;
}
label:hover,
input:hover {
color: #000;
cursor: pointer;
}
fieldset {
font-family: Futura, Arial, Helvetica, sans-serif;
background-color: #F2FFD5;
border: 2px #FFE07D solid;
color: #333;
}
legend,
p.total {
color: #222;
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: #F84100;
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 id="wrapper">
<h1>Welcome</h1>
<p>Choose your from the packages and services below</p>
<form action="process.php" method="post">
<fieldset id="packages">
<legend>Lets get started</legend>
<ol>
<li>
<label for="pages">How many pages do you need?</label>
<select name="pages">
<option value="12"> 1 </option>
<option value="22"> 2 </option>
<option value="33"> 3 </option>
<option value="44"> 4 </option>
<option value="55"> 5 </option>
<option value="66"> 6 </option>
<option value="77"> 7 </option>
<option value="88"> 8 </option>
<option value="99"> 9 </option>
<option value="110"> 10 </option>
</select>
</li>
<li>
<label for="email">How many email accounts do you need?</label>
<select name="email">
<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>
</li>
<li>
<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>
</li>
</ol>
</fieldset>
<fieldset id="delivery_speed">
<legend>Design Specifics</legend>
<ol>
<li>
<label for="email">How many custom graphics will you need?</label>
<select name="email">
<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>
</li>
<li>
<label for="photo">Will you need Photography service?</label>
<input name="photo" type="radio" value="150" />
<label>Yes</label>
<input name="photo" type="radio" value="0" checked="checked"/>
<label>No</label>
</li>
<li>
<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>
</li>
</ol>
</fieldset>
<fieldset id="browser_support">
<legend>Browser Support</legend>
<p>
<input type="checkbox" name="browser" id="browser" value="100">
<label for="browser">Will work in IE 12 ($100)</label>
</p>
<p>
<label for="email">Email address:</label>
<input name="email" type="text" />
<input name="ourmail" type="hidden" value="sales@archtronics.com" />
</p>
<p>
<input type="checkbox" name="mailcc" id="mailcc" value="000">
<label for="mailcc">Check to recieve a copy of this quote</label>
</p>
</fieldset>
<input id="submit" type="submit" value="Continue to Checkout >>"></p>
</form>
</div>
Before you post, read our: 
Need help with building an online quote form
