juggysingh Posted March 15, 2010 Share Posted March 15, 2010 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.