Help Please! To create a form for calculating a cost for an area |
Help Please! To create a form for calculating a cost for an area |
pause22 |
Mar 1 2017, 10:06 AM
Post
#1
|
Group: Members Posts: 5 Joined: 1-March 17 Member No.: 26,331 |
We are setting up a new website using Bluepark. We would like to add a Quick Quotation calculator so our customers can get an idea of the cost of the blinds. I am a complete novice when it comes to HTML coding and have no clue! I was wondering if anyone could possible help us out? The calculator would need to multiply the width by length and then multiply it by the cost per square meter. We would like it to display the cost in pounds to our customers. Any advice would be very much appreciated. Thank you in advance.
|
pandy |
Mar 1 2017, 11:37 AM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Lots of tutorials if you google. This one looks like it fits the bill. Haven't read it but it looks OK.
http://www.javascript-coder.com/javascript...or-script.phtml |
pause22 |
Mar 2 2017, 09:33 AM
Post
#3
|
Group: Members Posts: 5 Joined: 1-March 17 Member No.: 26,331 |
Thank you that is very helpful. I am nearly there but just have one last obstacle... do you know how to change the result so it rounds up to 2 decimal points i.e. £34.05?
|
pause22 |
Mar 2 2017, 09:33 AM
Post
#4
|
Group: Members Posts: 5 Joined: 1-March 17 Member No.: 26,331 |
<meta charset="utf-8" />
<title></title> <form action="" id="price"> <fieldset><legend>Shutter Blind Quick Calculator</legend> <p><label for="width">Width (mm)</label> <input id="width" name="width" type="number" /></p> <p><label for="height">Height (mm)</label> <input id="height" name="height" type="number" /></p> <p><input type="submit" value="Calculate Price" /> or <input type="reset" value="Reset" /></p> <p><label for="price">Price £</label> <input id="price" name="price" type="number" /></p> <p>This is an estimated price of your blinds. </p> <p>Please contact us to arrange an appointment so we can give you an accurate price. </p> <p>You can either <a href="/contact">email us,</a> ring us on 01244 332557 or <a href="/callbackrequest">request a callback.</a></p> </fieldset> </form> <script> (function () { function calculateprice(width, height) { width = parseFloat(width); height = parseFloat(height); return (width * height * 0.00014); } var price = document.getElementById("price"); if (price) { price.onsubmit = function () { this.price.value = calculateprice(this.width.value, this.height.value); return false; }; } }()); </script> |
Christian J |
Mar 2 2017, 11:30 AM
Post
#5
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
|
pandy |
Mar 2 2017, 03:25 PM
Post
#6
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
That's one thing I like about JS. Things are often in plain English. When you google something you want to to you often find a function named exactly like what you search for and it makes you think "Why didn't I think of that and just looked the function up?".
|
pause22 |
Mar 3 2017, 06:17 AM
Post
#7
|
Group: Members Posts: 5 Joined: 1-March 17 Member No.: 26,331 |
Thank you for the information. Unfortunately I can't get it to work
<meta charset="utf-8" /> <title></title> <form action="" id="price"> <fieldset><legend>Shutter Blind Quick Calculator</legend> <p><label for="width">Width (mm)</label> <input id="width" name="width" type="number" /></p> <p><label for="height">Height (mm)</label> <input id="height" name="height" type="number" /></p> <p><input type="submit" value="Calculate Price" /> or <input type="reset" value="Reset" /></p> <p><label for="price">Price £</label> <input id="price" name="price" type="number" /></p> <p>This is an estimated price of your blinds. </p> <p>Please contact us to arrange an appointment so we can give you an accurate price. </p> <p>You can either <a href="/contact">email us,</a> ring us on 01244 332557 or <a href="/callbackrequest">request a callback.</a></p> </fieldset> </form> <script> (function () { function calculateprice(width, height) { width = parseFloat(width); height = parseFloat(height); return (width * height * 0.00014); } var price = document.getElementById("price"); if (price) { price.onsubmit = function () { this.price.value = calculateprice(this.width.value, this.height.value); return false; }; } }()); </script> |
Christian J |
Mar 3 2017, 07:11 AM
Post
#8
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
See if this works (I didn't test):
CODE <script> (function () { function calculateprice(width, height) { width = parseFloat(width); height = parseFloat(height); return (width * height * 0.00014); } var price = document.getElementById("price"); if (price) { price.onsubmit = function () { var exact_value = calculateprice(this.width.value, this.height.value); var two_decimals = Math.round(exact_value*100)/100; this.price.value = two_decimals; return false; }; } }()); </script> |
pause22 |
Mar 3 2017, 09:42 AM
Post
#9
|
Group: Members Posts: 5 Joined: 1-March 17 Member No.: 26,331 |
Thank you so much!
|
Lo-Fi Version | Time is now: 25th April 2024 - 10:37 PM |