Jump to content

JQuery Order Form for specific id/class


juggysingh
 Share

Recommended Posts

Hi,I have a script which was originally sourced from http://dabrook.org/blog/articles/jquery-au...and-checkboxes/It is a Jquery Order form, which has now been modified to support drop down list selections. The issue i have now is how do i get the jquery to work for multiple class/id's? The aim is to have a quote form which would contain sets of options tied to a specific id/class. This will then allow a seperate sub-total to be displayed depending on the set of form elements a user has selected options from. For example a pizza order page consisting of a form with pizza bases, pizza toppings, pizza sizes all within the same form but with their own seperate classs/id allowing a sub-total to be caluculated for each sub-section. I hope this makes sense, please let me know if it doesent! :)Current code example below;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><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>$(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); //total = total + value                    });     $("select").each(function()    {        //This happens for each checked input field        var value = $(this).val();        total += parseInt(value); //total = total + value                  });}      //This happens when the page loads     calcTotal();         $("form").before('<p class="total_1">Total: <strong>' + total + '</strong></p>');     $(":submit").before('<p class="total_1">Total: <strong>' + total + '</strong></p>');             $("input:checkbox, input:radio, select").click(function()   {       total = 0;       calcTotal();       $("p.total_1").html("Total: <strong>" + total + "</strong>");   });	});            </script>        	<link rel="stylesheet" href="css/form.css" type="text/css" media="screen" ></head><body><div id="wrapper"><h1>PSD to HTML Service</h1><p>Choose your from the packages and services below</p><form id="total_1" action="" method="post">	<fieldset>		<legend>Packages1</legend>		<ol>			<li>				<input id="total_1" type="radio" name="package" value="99" checked />				<label for="package_basic">Basic: This package is aight. ($99)</label>			</li>			<li>				<input id="total_1" type="radio" name="package" value="149" />				<label for="package_pro">Professional: This package straight rocks. ($149)</label>			</li>		</ol>	</fieldset>	<fieldset>		<legend>Delivery Speed1</legend>		<ol>			<li>				<input id="total_1" type="radio" name="speed" value="49" />				<label for="speed_1day">1 day ($49)</label>			</li>			<li>				<input id="total_1" type="radio" name="speed" value="0" checked />				<label for="speed_3days">3 days (no charge)</label>			</li>			<li>				<input id="total_1" type="radio" name="speed" value="-39" />				<label for="speed_5days">5 days (-$39)</label>			</li>		</ol>	</fieldset>		<fieldset>		<legend>Browser Support1</legend>			<p>			<input id="total_1" type="checkbox" name="browser" value="100" />			<label for="browser">Will work in IE 12 ($100)</label>		</p>	</fieldset>    	<fieldset>		<legend>Packages2</legend>		<ol>			<li>				<input id="total_2" type="radio" name="package" value="99" checked />				<label for="package_basic">Basic: This package is aight. ($99)</label>			</li>			<li>				<input id="total_2" type="radio" name="package" value="149" />				<label for="package_pro">Professional: This package straight rocks. ($149)</label>			</li>		</ol>	</fieldset>	<fieldset>		<legend>Delivery Speed2</legend>		<ol>			<li>				<input id="total_2" type="radio" name="speed" value="49" />				<label for="speed_1day">1 day ($49)</label>			</li>			<li>				<input id="total_2" type="radio" name="speed" value="0" checked />				<label for="speed_3days">3 days (no charge)</label>			</li>			<li>				<input id="total_2" type="radio" name="speed" value="-39" />				<label for="speed_5days">5 days (-$39)</label>			</li>		</ol>	</fieldset>		<fieldset>		<legend>Browser Support2</legend>			<p>			<input id="total_2" type="checkbox" name="browser" value="100" />			<label for="browser">Will work in IE 12 ($100)</label>		</p>	</fieldset>	<p><input type="submit" value="Continue to Checkout >>"></p></form></div></body></html>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...