May 28, 201313 yr Hello, Everyone here at WDF has been so helpful. Forum member Lyndsey gave me this: http://jsfiddle.net/LyndseyB/GJLCF/ It's exactly what I'm looking for but I'm a beginner working on dreamweaver and I cant get it to work. I plugged the html into the body and the javascript into the head. Am I missing something? Is there a plugin that I need? Another code I tried that works awesome can be found here: www(dot)webdesignerforum(dot)co(dot)uk/topic/62025-please-help-my-to-add-a-calculator-to-my-website-pretty-please/ but it only has dropdowns and i need some check boxes also. Thanks Lyndsey! I can't contact anyone as I'm still a newbie and I have restrictions on my account. Jimmy
May 29, 201313 yr Hi Jimmy, Could you post your .html file code as you have it in Dreamweaver onto here for us to take a look at?, it will certainly help in getting you an answer both now and for future posts. Ensure you use the code option when posting (<> icon) though. Also I've made some slight modifications to the code Lyndsey provided to ensure the code runs when your page loads, as it appears JSfiddle was providing this for Lyndsey, you also need to include the other line below as jQuery is required. I've included a complete up-to-date example below that will work. Tip - You will notice the JavaScript is at the bottom of the page as opposed to the top, this is the best place for your JavaScript as it will allow your page to load more rapidly before loading the JavaScript and is often advised. Required to include jQuery in your file. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> Up-To-Date Version: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> <select class="sel" id="sel1"> <option value=""> Select a Value... </option> <option value="10"> 10 </option> <option value="20"> 20 </option> </select> <select class="sel" id="sel2"> <option value=""> Select a Value... </option> <option value="70"> 70 </option> <option value="80"> 80 </option> </select> <input type="checkbox" value="50" name="myChk" id="myChk" /> Add Service (50) <br /> Total: <span id="total"> </span> </body> </html> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="application/javascript"> $(document).ready(function() { var totalElement = $('#total'); $('.sel').on('change', function() { totalElement.html( parseInt($('#sel1').val()) + parseInt($('#sel2').val()) ); }); $('#myChk').click(function() { if($(this).is(':checked')) { totalElement.html(parseInt(totalElement.html()) + parseInt($(this).val())); } else { totalElement.html(parseInt(totalElement.html()) - parseInt($(this).val())); }; }); }); </script> Hopefully that helps Edited May 29, 201313 yr by CSN-UK
May 29, 201313 yr Author Okay, Here's what I've got: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <!-- TemplateBeginEditable name="doctitle" --> <title>Untitled Document</title> <!-- TemplateEndEditable --> <!-- TemplateBeginEditable name="head" --> <!-- TemplateEndEditable --> <style type="text/css"> <!-- .header { width: 960px; padding: 0px 0px 0px 150px; background-color: #FFFF00; } body { font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif; background-color: #ffff00; margin: 0; padding: 0; color: #000; } /* ~~ Element/tag selectors ~~ */ ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */ padding: 0; margin: 0; } h1, h2, h3, h4, h5, h6, p { margin-top: 0; /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */ padding-right: 15px; padding-left: 15px; } a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */ border: none; } /* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */ a:link { color: #42413C; text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */ } a:visited { color: #6E6C64; text-decoration: underline; } a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */ text-decoration: none; } /* ~~ this fixed width container surrounds all other elements ~~ */ .container { width: 960px; background-color: #FFFF00; margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */ } /* ~~ This is the layout information. ~~ 1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design. */ .content { padding: 10px 0; } /* ~~ miscellaneous float/clear classes ~~ */ .fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */ float: right; margin-left: 8px; } .fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */ float: left; margin-right: 8px; } .clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the overflow:hidden on the .container is removed */ clear:both; height:0; font-size: 1px; line-height: 0px; } --> </style> </script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Estimate Form </title> </head> <body> <div class="header"><!-- end .header --><img src="images/header_02.jpg" width="900" height="187"/> </div> <p> <center><h1>One Time Cleaning</h1></center> <center><h2>Estimate Form</h2></center> <p> <p> Option 1 <select class="sel" id="sel1"> <option value=""> 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> </select> <p> Option 2 <select class="sel" id="sel2"> <option value=""> 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> </select> <p> Option 3 <select class="sel" id="sel3"> <option value=""> 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> </select> <p> Option 4 (+ 25) <input type="checkbox" value="25" name="myChk" id="myChk" /> <p> Option 5 (+ 25) <input type="checkbox" value="25" name="myChk" id="myChk" /> <p> <br /> Total: <span id="total"> </span> </body> </html> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="application/javascript"> $(document).ready(function() { var totalElement = $('#total'); $('.sel').on('change', function() { totalElement.html ( parseInt($('#sel1').val()) + parseInt($('#sel2').val()) ); }); $('#myChk').click(function() { if($(this).is(':checked')) { totalElement.html(parseInt(totalElement.html()) + parseInt($(this).val())); } else { totalElement.html(parseInt(totalElement.html()) - parseInt($(this).val())); }; }); }); </script> Everything works except options 3 and 5. I know it has something to do with the part below but I've been playing with it and can't seem to get it right. Thanks for your help! I can't begin to tell you how much I appreciate it! <script type="application/javascript"> $(document).ready(function() { var totalElement = $('#total'); $('.sel').on('change', function() { totalElement.html ( parseInt($('#sel1').val()) + parseInt($('#sel2').val()) ); }); $('#myChk').click(function() { if($(this).is(':checked')) { totalElement.html(parseInt(totalElement.html()) + parseInt($(this).val())); } else { totalElement.html(parseInt(totalElement.html()) - parseInt($(this).val())); }; }); }); </script> Edited May 29, 201313 yr by jimmymustang
May 29, 201313 yr Just at a quick glance..you've not included option 3 in your JS, and option 4/5 have the same ID (you can only assign unique ID per element), so change option 4/5 to have a class="myChk" and the JS would be: $(function () { var totalElement = $('#total'); $('.sel').on('change', function () { totalElement.html (parseInt($('#sel1').val()) + parseInt($('#sel2').val()) + parseInt($('#sel3').val()) ); }); $('.myChk').click(function () { if ($(this).is(':checked')) { totalElement.html(parseInt(totalElement.html()) + parseInt($(this).val())); } else { totalElement.html(parseInt(totalElement.html()) - parseInt($(this).val())); }; }); }); Quick note: $(function(){ }); is exactly the same as using $(document).ready(function() { });
May 29, 201313 yr Author Just at a quick glance.. you've not included option 3 in your JS, and option 4/5 have the same ID (you can only assign unique ID per element), so change option 4/5 to have a class="myChk" and the JS would be: $(function () { var totalElement = $('#total'); $('.sel').on('change', function () { totalElement.html (parseInt($('#sel1').val()) + parseInt($('#sel2').val()) + parseInt($('#sel3').val()) ); }); $('.myChk').click(function () { if ($(this).is(':checked')) { totalElement.html(parseInt(totalElement.html()) + parseInt($(this).val())); } else { totalElement.html(parseInt(totalElement.html()) - parseInt($(this).val())); }; }); }); Quick note: $(function(){ }); is exactly the same as using $(document).ready(function() { }); Thanks Wynn, But when I added: + parseInt($('#sel3').val()) It still wouldn't work!?!?!?!?!?
May 29, 201313 yr Author Hi Jimmy, Could you post your .html file code as you have it in Dreamweaver onto here for us to take a look at?, it will certainly help in getting you an answer both now and for future posts. Ensure you use the code option when posting (<> icon) though. Also I've made some slight modifications to the code Lyndsey provided to ensure the code runs when your page loads, as it appears JSfiddle was providing this for Lyndsey, you also need to include the other line below as jQuery is required. I've included a complete up-to-date example below that will work. Tip - You will notice the JavaScript is at the bottom of the page as opposed to the top, this is the best place for your JavaScript as it will allow your page to load more rapidly before loading the JavaScript and is often advised. Required to include jQuery in your file. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> Up-To-Date Version: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> <select class="sel" id="sel1"> <option value=""> Select a Value... </option> <option value="10"> 10 </option> <option value="20"> 20 </option> </select> <select class="sel" id="sel2"> <option value=""> Select a Value... </option> <option value="70"> 70 </option> <option value="80"> 80 </option> </select> <input type="checkbox" value="50" name="myChk" id="myChk" /> Add Service (50) <br /> Total: <span id="total"> </span> </body> </html> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="application/javascript"> $(document).ready(function() { var totalElement = $('#total'); $('.sel').on('change', function() { totalElement.html( parseInt($('#sel1').val()) + parseInt($('#sel2').val()) ); }); $('#myChk').click(function() { if($(this).is(':checked')) { totalElement.html(parseInt(totalElement.html()) + parseInt($(this).val())); } else { totalElement.html(parseInt(totalElement.html()) - parseInt($(this).val())); }; }); }); </script> Hopefully that helps Okay, So what is happening is, when I added a third "option" I added: + parseInt($('#sel3').val()) The problem is, unless each dropdown has a chosen value(not 0) it wont give a total. And if an item(or number) is set back to zero or changed, it's not changing the total. Thanks again for all your help!
May 29, 201313 yr in your options, change <option value=""> 0 </option> to this <option value="0"> 0 </option>
May 29, 201313 yr Author Okay, Sorry for all the posts, I'm learning. I've been staring at the html so long I can't see straight. So problem solved on the drop downs. Thanks to CSN-UK and Wynn!!! I had <option value="0"> 0 </option> set with no "0" in it so all drop down had to be selected to get a total. Now on to adding more check boxes. Can you PLEASE help with that also?!?!?!?!
May 29, 201313 yr Author in your options, change <option value=""> 0 </option> to this <option value="0"> 0 </option> I just found it and made a post! Thanks Wynn!!!!!! Can you help me with the checkboxes? P L E A S E
May 29, 201313 yr I've played around with the JS to try to make it a little cleaner.You should be able to just keep adding different options as needed to your HTML.Just make sure the checkboxes have a class of myChk and the select have a class of selI've also wrapped the whole lot in a form tag with the ID "quote" <form id="quote"> <p>Option 1 <select class="sel"> <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> </select></p> <p>Option 2 <select class="sel"> <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> </select></p> <p>Option 3 <select class="sel"> <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> </select></p> <p>Option 4 (+ 25) <input type="checkbox" value="25" class="myChk" /> </p> <p>Option 5 (+ 25) <input type="checkbox" value="25" class="myChk" /> </p> <p>Option 6 (+ 50) <input type="checkbox" value="50" class="myChk" /> </p> <p>Option 7 (+ 75) <input type="checkbox" value="75" class="myChk" /> </p> <p>Total: <span id="total"> 0 </span></p> </form> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> $('#quote input').prop('checked',false); // Reset checkboxes and select $('#quote select').prop('selectedIndex',0); // on reload, delete if not needed $(function() { $('#quote input , #quote select').on('change', function() { var total = 0; $('.sel , .myChk:checked').each(function(){ total += parseInt($(this).val()); }); $('#total').text(total); }); }); </script> </body> </html>
May 30, 201313 yr Author I've played around with the JS to try to make it a little cleaner. You should be able to just keep adding different options as needed to your HTML. Just make sure the checkboxes have a class of myChk and the select have a class of sel I've also wrapped the whole lot in a form tag with the ID "quote" <form id="quote"> <p>Option 1 <select class="sel"> <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> </select></p> <p>Option 2 <select class="sel"> <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> </select></p> <p>Option 3 <select class="sel"> <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> </select></p> <p>Option 4 (+ 25) <input type="checkbox" value="25" class="myChk" /> </p> <p>Option 5 (+ 25) <input type="checkbox" value="25" class="myChk" /> </p> <p>Option 6 (+ 50) <input type="checkbox" value="50" class="myChk" /> </p> <p>Option 7 (+ 75) <input type="checkbox" value="75" class="myChk" /> </p> <p>Total: <span id="total"> 0 </span></p> </form> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> $('#quote input').prop('checked',false); // Reset checkboxes and select $('#quote select').prop('selectedIndex',0); // on reload, delete if not needed $(function() { $('#quote input , #quote select').on('change', function() { var total = 0; $('.sel , .myChk:checked').each(function(){ total += parseInt($(this).val()); }); $('#total').text(total); }); }); </script> </body> </html> Hey Wynn! I just got home and plugged this into dreamweaver, I can't begin to thank you for all you're help! It WORKS!!!!!!!!!!!!!!!!!! Thank you, Thank you, Thank you!!!
June 8, 201313 yr This is brilliant!I'm wondering if there would be a way of replacing the drop down boxes with a text input box? ...so the "Total" reacts to whatever is inputted?
June 8, 201313 yr Made some changes and its not perfect, but you can pass basic math in the text input also. <html> <body> <div id ="calculator"> <p>Option 1 <select class="option"> <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> </select></p> <p>Option 2 <select class="option"> <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> </select></p> <p>Option 3 <input type="text" class="option" > </p> <p>Option 4 <input type="text" class="option" > <p>Option 5 (+ 25) <input type="checkbox" value="25" class="chk-option" /> </p> <p>Option 6 (+ 50) <input type="checkbox" value="50" class="chk-option" /> </p> <p>Option 7 (+ 75) <input type="checkbox" value="75" class="chk-option" /> </p> <p>Total: <span id="total"> 0 </span></p> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> $('#calculator input[type=text]').val(0); // Reset checkboxes $('#calculator input').prop('checked',false) // text and select $('#calculator select').prop('selectedIndex',0); // on reload, delete if not needed $(function() { $('#calculator input , #calculator select').on('change', function() { var total = 0; $('.option , .chk-option:checked').each(function(){ total += parseInt(eval($(this).val())); }); $('#total').text(total); }); }); </script> </body> </html>
June 8, 201313 yr This is amazing Wynn, works like a dream!There are some tweaks I'd like to make I just don't know how. Don't worry, I'm no expecting anyone to do this for me I just don't even know what to put into google to come up with the right tutorials or whatever; so feel free to point me in right direction of some key words or something.A tweak I'd like to try out is as follows:With the drop down selection boxes (options 1+2), you've made it possible to specify an outome based on what the user selects e.i if you select 1, the total can be 35.4 for example. Is it possible to get the same happening with the input boxes? So that the user could input a number and the total could be a number assigned by me? I guess this is more complicated as there are infinite "option values", if that's the right term.Maybe like an algorythm type thing? Apolgies if it's clear that I know nothing about this!Duan
June 8, 201313 yr Author Made some changes and its not perfect, but you can pass basic math in the text input also. <html> <body> <div id ="calculator"> <p>Option 1 <select class="option"> <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> </select></p> <p>Option 2 <select class="option"> <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> </select></p> <p>Option 3 <input type="text" class="option" > </p> <p>Option 4 <input type="text" class="option" > <p>Option 5 (+ 25) <input type="checkbox" value="25" class="chk-option" /> </p> <p>Option 6 (+ 50) <input type="checkbox" value="50" class="chk-option" /> </p> <p>Option 7 (+ 75) <input type="checkbox" value="75" class="chk-option" /> </p> <p>Total: <span id="total"> 0 </span></p> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> $('#calculator input[type=text]').val(0); // Reset checkboxes $('#calculator input').prop('checked',false) // text and select $('#calculator select').prop('selectedIndex',0); // on reload, delete if not needed $(function() { $('#calculator input , #calculator select').on('change', function() { var total = 0; $('.option , .chk-option:checked').each(function(){ total += parseInt(eval($(this).val())); }); $('#total').text(total); }); }); </script> </body> </html> Hey Wynn, I have a question for you on this topic. Is it possible that there could be a dropdown menu that once an option is selected, it could increase the total by a certain percentage? For example: Option A no increase Option B 5% increase Option C 10% increase Option D 20% increase Thanks for your infinite wisdom! Jimmy
June 9, 201313 yr try adding this ... <p>Option 8 (+ percentage) <select class="percent"> <option value="0"> 0 </option> <option value="5"> 5% </option> <option value="10"> 10% </option> <option value="15"> 15% </option> <option value="20"> 20% </option> <option value="25"> 25% </option> </select></p> <p>Total: <span id="total"> 0 </span></p> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> $('#calculator input[type=text]').val(0); // Reset checkboxes $('#calculator input').prop('checked',false) // text and select $('#calculator select').prop('selectedIndex',0); // on reload. $(function() { $('#calculator input , #calculator select').on('change', function() { var total = 0; // reset total on any change $('.option , .chk-option:checked').each(function(){ total += parseInt(eval($(this).val())); // accumulate total from values. }); var percentage = (parseInt($('.percent').val()) / 100) * total; //set percentage value. total += percentage // total equals total plus percentage. $('#total').text(total); }); }); </script> </body> </html>
June 9, 201313 yr Author try adding this ... <p>Option 8 (+ percentage) <select class="percent"> <option value="0"> 0 </option> <option value="5"> 5% </option> <option value="10"> 10% </option> <option value="15"> 15% </option> <option value="20"> 20% </option> <option value="25"> 25% </option> </select></p> <p>Total: <span id="total"> 0 </span></p> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> $('#calculator input[type=text]').val(0); // Reset checkboxes $('#calculator input').prop('checked',false) // text and select $('#calculator select').prop('selectedIndex',0); // on reload. $(function() { $('#calculator input , #calculator select').on('change', function() { var total = 0; // reset total on any change $('.option , .chk-option:checked').each(function(){ total += parseInt(eval($(this).val())); // accumulate total from values. }); var percentage = (parseInt($('.percent').val()) / 100) * total; //set percentage value. total += percentage // total equals total plus percentage. $('#total').text(total); }); }); </script> </body> </html> Okay, So I'm having trouble. Where exactly do I add the above into this: <html> <body> <div id ="calculator"> <p>Option 1 <select class="option"> <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> </select></p> <p>Option 2 <select class="option"> <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> </select></p> <p>Option 3 <input type="text" class="option" > </p> <p>Option 4 <input type="text" class="option" > <p>Option 5 (+ 25) <input type="checkbox" value="25" class="chk-option" /> </p> <p>Option 6 (+ 50) <input type="checkbox" value="50" class="chk-option" /> </p> <p>Option 7 (+ 75) <input type="checkbox" value="75" class="chk-option" /> </p> <p>Total: <span id="total"> 0 </span></p> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> $('#calculator input[type=text]').val(0); // Reset checkboxes $('#calculator input').prop('checked',false) // text and select $('#calculator select').prop('selectedIndex',0); // on reload, delete if not needed $(function() { $('#calculator input , #calculator select').on('change', function() { var total = 0; $('.option , .chk-option:checked').each(function(){ total += parseInt(eval($(this).val())); }); $('#total').text(total); }); }); </script> </body> </html>
June 9, 201313 yr Author Hey Wynn! I had to change a few things but I got it to WORK!!! Now I'd like to ask another question. If I left the code the original way and the customer chose from the different options then the total would appear in the box. Now they chose from the dropdown option to add the percentage. Can that total(the one from the original total box + the percentage) appear in a separate box? So that they can see both totals and compare? Edited June 9, 201313 yr by jimmymustang
Create an account or sign in to comment