The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Help Please! To create a form for calculating a cost for an area
pause22
post 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. biggrin.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 1 2017, 11:37 AM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,662
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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pause22
post 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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pause22
post 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 &pound;</label> <input id="price" name="price" type="number" /></p>

<p>This is an estimated price of your blinds. &nbsp;</p>

<p>Please contact us to arrange an appointment so we can give you an accurate price. &nbsp;</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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 2 2017, 11:30 AM
Post #5


.
********

Group: WDG Moderators
Posts: 7,628
Joined: 10-August 06
Member No.: 7



See http://www.javascriptkit.com/javatutors/round.shtml
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 2 2017, 03:25 PM
Post #6


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,662
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?". biggrin.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pause22
post 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 sad.gif

<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 &pound;</label> <input id="price" name="price" type="number" /></p>

<p>This is an estimated price of your blinds. &nbsp;</p>

<p>Please contact us to arrange an appointment so we can give you an accurate price. &nbsp;</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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 3 2017, 07:11 AM
Post #8


.
********

Group: WDG Moderators
Posts: 7,628
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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pause22
post Mar 3 2017, 09:42 AM
Post #9





Group: Members
Posts: 5
Joined: 1-March 17
Member No.: 26,331



Thank you so much!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 21st September 2017 - 07:22 AM