jimmymustang
Members
-
Joined
-
Last visited
Everything posted by jimmymustang
-
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?
-
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>
-
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
-
Here is a link to what helped me: http://www.webdesignerforum.co.uk/topic/69247-i-need-help-i-need-a-simple-calculator-for-my-website/
-
NEVERMIND! I finally figured it out!!!
-
Here's the one I've been trying to use: http://jqueryui.com/datepicker/ If I copy and paste the following into a blank document in dreamweaver it works fine. the minute I add it into the page I'm working on, Nothing. I have left off the <head> tags and the <body> tags and put the script into the corresponding places but still, it wont work? <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>jQuery UI Datepicker - Default functionality</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css" /> <script> $(function() { $( "#datepicker" ).datepicker(); }); </script> </head> <body> <p>Date: <input type="text" id="datepicker" /></p> </body> </html>
-
It seems to be what I'm looking for but I haven't got a clue as to how to make it work!
-
Can anybody tell me the best way to add a Date Time Picker to my form? I'm using dreamweaver cs6. THANKS!
-
I was originally trying to get in touch with you! It was your post that I found in a google search that led me to this forum. I wasn't able to contact anyone directly at first because of the "25 Posts" rule but all the nice folks here have been extremely helpful. I'm working on a "estimate form" for my wife's website, I hope you wont mind if I hit you up for info soon.
-
So i've begun creating an estimate form for my wife's website. Many thanks again to those who have helped. Now here's my next question, what is the best way to make it so that that once the customer fills in all the info they can hit a "submit" button and all the info from the form gets delivered to her email? Thanks in advance, Jimmy
-
Thanks to WDF members Lyndsey, CSN-UK and Wynn the page I was struggling with will be up and running in no time! Deepest Gratitude!
-
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!!!
-
I just want to say thanks to everybody on WDF!!! Everyone here has been so nice and helpful with all of my newbie questions! Jimmy
-
I just found it and made a post! Thanks Wynn!!!!!! Can you help me with the checkboxes? P L E A S E
-
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?!?!?!?!
-
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!
-
Thanks Wynn, But when I added: + parseInt($('#sel3').val()) It still wouldn't work!?!?!?!?!?
-
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>
-
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
-
I like www(dot)rockin626(dot)com/
-
Lyndsey! HELP! Hello Again, I am a complete amateur. I'm using dreamweaver and I put the html into the body and the javascript into the head but I cant get it to work?!?!?! PLEASE HELP ME.......It's driving me CRAZY!
-
Lyndsey, I think thats EXACTLY what I'm looking for! I'll try it asap and let you know. Thank you so much!!
-
Léon, I hoping to get your help with another topic? www(dot)webdesignerforum(dot)co(dot)uk/topic/62025-please-help-my-to-add-a-calculator-to-my-website-pretty-please/ Thanks in advance!
-
Sorry, *checked and *un-checked My phone isn't cooperating with the edit button for my earlier post.
-
I am trying to make something like what is explained in this thread. http://www(dot)webdesignerforum(dot)co(dot)uk/topic/62025-please-help-my-to-add-a-calculator-to-my-website-pretty-please/?fromsearch=1 It works great but I also need check boxes that add value when Che led and subtract when in-checked.
