Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Need help with building an online quote form

    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 &gt;&gt;"></p>
    </form>
    </div>

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,466
    Thanks
    23
    Thanked 634 Times in 633 Posts
    FYI This is jquery a javascript framework. Here is how to get the value of a select dropdown.
    Code:
    	$("select").change(function(){
    		alert(this.value);
    	});
    Instead of the alert you might want to set a string to that value and process it. Each dropdown will trigger this.

    I do notice that the dropdowns have a default value of one, think that should be zero.
    Last edited by sunfighter; 01-13-2013 at 12:53 PM.

  • #3
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Pretty sure I have it all wrong

    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:&nbsp;$" + 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:&nbsp;$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>
                &nbsp;
                <input name="pages" type="radio" value="100" />
                <label>6-10</label>
                &nbsp;
                <input name="pages" type="radio" value="150" />
                <label>11-15</label>
                &nbsp;
                <input name="pages" type="radio" value="170" />
                <label>15-20</label>
                &nbsp;
                <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>
                &nbsp;
                <input name="photo-hours" type="radio" value="50"  />
                <label>1 hour</label>
               &nbsp;
                <input name="photo-hours" type="radio" value="80"  />
                <label>2 hours</label>
                &nbsp;
                <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>
                &nbsp;
            	<input name="hosting_years" type="radio" value="75" />
                <label>1 year</label>
                &nbsp;
                <input name="hosting_years" type="radio" value="150" />
                <label>2 years</label>
                &nbsp;
                <input name="hosting_years" type="radio" value="175" />
                <label>3 years</label>
                &nbsp;
                <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>&nbsp;
            <input name="address" type="text" /><br />
            </p>
            <p>
            <label for="city">City:</label>&nbsp;
            <input name="city" type="text" /><br />
            </p>
            <p>
            <label for="state">State:</label>&nbsp;
            <input name="state" type="text" /><br />
            </p>
            <p>
            <label for="zip">Zip Code:</label>&nbsp;
            <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:&nbsp;$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>


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •