juggysingh Posted March 9, 2010 Share Posted March 9, 2010 Hi, I am a complete begineer in relation to js and jquery, and am attempting to modify an existing order form script from; Site: http://dabrook.org/blog/articles/jquery-automatic-update-order-form-with-radio-buttons-and-checkboxes/ Page: http://dabrook.org/examples/cdia/javascript/05/form.html Currently the order form script only supports check boxes and radio buttons, but i am trying to update it to also support drop down lists and then only form elements with a specific class/id. Is this possible with jquery? Many thanks in advance! ORIGINAL CODE: // JavaScript Document $(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 }); } //This happens when the page loads 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>"); }); }); ORDER FORM HTML TO SUPPORT AS EXAMPLE; <div class="packages1"> <form action="" method="post"> <fieldset id="packages1"> <legend>Packages1</legend> <input id="selectList" name="package1" type="radio" value="99" checked /> <label for="package1_basic">Basic: This package is aight. ($99)</label> <input id="selectList" type="radio" name="package1" value="149" /> <label for="package1_pro">Professional: This package straight rocks. ($149)</label> </fieldset> <fieldset id="browser_support1"> <legend>Browser Support</legend> <input id="selectList" type="checkbox" name="browser1" value="100" /> <label for="browser1">Will work in IE 12 ($100)</label> </fieldset> <fieldset> <legend>Packages1 Options</legend> <select id="selectList" name="packages1_options" size="1"> <option value="0" selected="selected">Choose</option> <option value="10">Option 1</option> <option value="20">Option 2</option> <option value="30">Option 3</option> </select> </fieldset> </form> </div> Quote Link to comment Share on other sites More sharing options...
nafetski Posted March 10, 2010 Share Posted March 10, 2010 Yep, it's definitely possible Add this underneath the input:checked each statement. $("select").each(function() { //This happens for each checked input field var value = $(this).val(); total += parseInt(value); //total = total + value }); Quote Link to comment Share on other sites More sharing options...
juggysingh Posted March 11, 2010 Author Share Posted March 11, 2010 Thanks Nafetski, almost there!!! The page now recognises dropdown values, but will only update the total when the page is refreshed. What needs to be added to the jquery in order for the values from the drop down list to update the total value on the page in real-time, the same as the radio and check boxes? Thanks! Current Code with Nafetskis addition; <!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() //Nafetskis added code! { //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">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> <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 action="" method="post"> <fieldset id="packages"> <legend>Packages</legend> <ol> <li> <input type="radio" name="package" id="package_basic" value="99" checked /> <label for="package_basic">Basic: This package is aight. ($99)</label> </li> <li> <input type="radio" name="package" id="package_pro" value="149" /> <label for="package_pro">Professional: This package straight rocks. ($149)</label> </li> </ol> </fieldset> <fieldset id="delivery_speed"> <legend>Delivery Speed</legend> <ol> <li> <input type="radio" name="speed" id="speed_1day" value="49" /> <label for="speed_1day">1 day ($49)</label> </li> <li> <input type="radio" name="speed" id="speed_3days" value="0" checked /> <label for="speed_3days">3 days (no charge)</label> </li> <li> <input type="radio" name="speed" id="speed_5days" value="-39" /> <label for="speed_5days">5 days (-$39)</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> </fieldset> <fieldset> <p> <select name="package_options" id="package_options" size="1"> <option value="0" selected="selected">Choose</option> <option value="10">Option 1</option> <option value="20">Option 2</option> <option value="30">Option 3</option> </select> </p> </fieldset> <p><input id="submit" type="submit" value="Continue to Checkout >>"></p> </form> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.