Printable Version of Topic
Click here to view this topic in its original format
HTMLHelp Forums _ Client-side Scripting _ Help Please! To create a form for calculating a cost for an area
Posted by: pause22 Mar 1 2017, 10:06 AM
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. 
Posted by: pandy Mar 1 2017, 11:37 AM
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-form/javascript-calculator-script.phtml
Posted by: pause22 Mar 2 2017, 09:33 AM
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?
Posted by: pause22 Mar 2 2017, 09:33 AM
<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>
Posted by: Christian J Mar 2 2017, 11:30 AM
See http://www.javascriptkit.com/javatutors/round.shtml
Posted by: pandy Mar 2 2017, 03:25 PM
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?".
Posted by: pause22 Mar 3 2017, 06:17 AM
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>
Posted by: Christian J Mar 3 2017, 07:11 AM
See if this works (I didn't test):
(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>
Posted by: pause22 Mar 3 2017, 09:42 AM
Thank you so much!
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)