Hi there

 

Please could someone give me some advice on how to do a custom html calculator for my webpage. Something like the link below

 

Jane's Ironing Service

 

Ideally I would like on my website a page where it shows my prices and then calculates once people have selected the items, exactly as above.

 

I hope that makes sense as I am a beginner and new to html etc.

 

Many thanks

 

Angela

This isn't hard to do, you just need javascript.

Just check the value of the boxes and make some calculations.

 

Maybe you could give some more information about the calculations need to be done, so I can help you on your way with an example

Hi Leonvv

 

Thank you very much for your reply.

 

How do I get Javascript and is it easy to use if you haven't used before?

 

The calculations to be done are pretty much the same as the what the link shows to http://www.janesironingservice.com/calculator.php

 

I have a website but was hoping I would be able to use a plugin or something that could just be a copy/paste job

 

You can tell I don't know much about this techie stuff!!!

 

Any other suggestions would be great. I'm looking to have exactly as what's on the above website but obviously with different items and prices.

 

Hope that makes sense!

 

Many thanks

 

Angela

Well, first we need to make a box where you can select multiple options.

This is easy with HTML.

Just add the <select> tag into your document and after that the options in the <option> tag, like this:

<select>
<option>Some text</option>
<option>Bla bla</option>
</select>

 

Then whe insert javascript, javascript is a simple scripting language used to make websites more dynamic.

Javascript must be written between <script> tags. (And must be in the head section of your document)

 

<script type="text/javascript">

</script>

 

Now we add a value attribute to our options tags, a value is text we can access with javascript.

We also need to give our select tag an Id , so the Javascript code "knows" wich select box we want to access.

 

<select id="select1">
<option value="5" >Some text</option>
<option value="10" >Bla bla</option>
</select>

 

Know we can write a simple javascript function to display the value.

Please note that everything after two slashes are comments, and you don't need to include them into your document.

 

<script type="text/javascript">
function add () // The name of the function
{
var number1=document.getElementById("select1").value; //store the value of select1 into a variable

}

</script>

 

So know whe have a function that displays the value of the select box.

But before this is gonna work we need an event,

an event triggers the function, and let it run trough the code.

For this example we will make a button with an onclick event. (Add this in your body section)

 

<input type="button" onClick="add()" value="calculate">

 

Allright so know whe have a function that is triggerd if a button is clicked and a javascript function that displays the value of the option that is selected.

But know we want to make a second box with options, and add the values of the options together in order to make a calculator, and maybe the most important thing: making the javascript display the total of the two options selected.

Add a second select tag, and an text input where we will display the variable.

Your body section would now look like this: (Make sure the two select boxes have a different ID)

<select id="select1">
<option value="5" >Some text</option>
<option value="10" >Bla bla</option>
</select>

<select id="select2">
<option value="5" >Some text</option>
<option value="10" >Bla bla</option>
</select>

<input type="button" onClick="add()" value="calculate">
<input type="text" id="answer" >

 

Your javascript should look like this:

<script type="text/javascript">
function add () // The name of the function
{
var number1=document.getElementById("select1").value; //store the value of select1 into a variable
var number2=document.getElementById("select2").value; // do the same with select 2
var total=Number(number1)+Number(number2); // Add them together 
document.getElementById("answer").value=total; // Display the answer in the text box
}

</script>

 

So this is how you make a simple calculator in Javascript,

I put the example online: Example

View the source to see the document entirely.

Hope it helped

 

Ps, sorry for bad english

Edited June 9, 201214 yr by Leonvv

<select id="select2">
<option value="5" >Some text</option>
<option value="10" >Bla bla</option>
</select>

 

Errr, that can be tampered by the user with an inspect element.

 

I always do something like:

 

<select id="select2">
<option value="0" >Some text</option>
<option value="1" >Bla bla</option>
</select>

And in the php/js bit I'd have an array with the values I really intend to use, I've managed to input arbitrary text into sites that didn't think <option> through.

<select id="select2">
<option value="5" >Some text</option>
<option value="10" >Bla bla</option>
</select>

 

Errr, that can be tampered by the user with an inspect element.

 

I always do something like:

 

<select id="select2">
<option value="0" >Some text</option>
<option value="1" >Bla bla</option>
</select>

And in the php/js bit I'd have an array with the values I really intend to use, I've managed to input arbitrary text into sites that didn't think <option> through.

 

Yeah, but you don't really need to use 0 or 1 instead, you can also just check if the input is a number or not with a simple php if statement.

 

Thanks for pointing out

Hi

 

Thank you for your reply.

 

I think I get what your saying, but having never done JavaScript etc before it's like a foreign language to me. If I were to copy/paste your code to my site, would it be a start of a calculator that I could edit?? and would the adding up function work?

 

Many thanks

 

Angela

Hi

 

Thank you for your reply.

 

I think I get what your saying, but having never done JavaScript etc before it's like a foreign language to me. If I were to copy/paste your code to my site, would it be a start of a calculator that I could edit?? and would the adding up function work?

 

Many thanks

 

Angela

 

Yea, it would work, but make sure you use the same id for all the elements, or edit the id in the javascript function. And if you want to have more select boxes or doing other calculations you will need to edit the javascript funtion.

 

If you have anymore questions, I'm here

Yea, it would work, but make sure you use the same id for all the elements, or edit the id in the javascript function. And if you want to have more select boxes or doing other calculations you will need to edit the javascript funtion.

 

If you have anymore questions, I'm here

 

 

Eeek, how do you edit the javascript function? Thank you

Eeek, how do you edit the javascript function? Thank you

 

Well this is the function:

function add () // The name of the function
{
var number1=document.getElementById("select1").value; //store the value of select1 into a variable
var number2=document.getElementById("select2").value; // do the same with select 2
var total=Number(number1)+Number(number2); // Add them together 
document.getElementById("answer").value=total; // Display the answer in the text box
}

 

Lets say that we add 2 extra text boxes,

we will need to store the values of those boxes too.

so we will duplicate this line: var number2=document.getElementById("select2").value; // do the same with select 2.

And we need to add that variable in the answer.

So it will look like this:

 

function add () // The name of the function
{
var number1=document.getElementById("select1").value; // Note that at this point there are 4 variables,
var number2=document.getElementById("select2").value; // And each of them , have a different name
var number3=document.getElementById("select3").value; // And the word between the quotes is the name of the select
var number4=document.getElementById("select4").value; // so you need to make sure the select box have a correct ID
var total=Number(number1)+Number(number2)+Number(number3)+Number(number4); // Now there are 4 variables add together
document.getElementById("answer").value=total; // Display the answer in the text box
}

 

That is all you have to do, duplicate this line: var number2=document.getElementById("select2").value;

Change "number2" and "select2" in the correct word.

And add the variable name in the sum, wich is written after the variable name "total"

 

Thats all

Hello Leonvv!

PLEASE HELP!!

The Drop Down Menus work great but I would also like to add simple check boxes for added services.

Can you tell me what the code would be to add to what you've already posted?

i.e. check a box and it adds a $ amount to the total.

Thanks in advance!

Jimmy

P.S. check a box and it adds a $ amount to the total

uncheck and it subtracts.

 

Thanks in advance to anyone who can help me!

Edited May 27, 201313 yr by jimmymustang

How about something like this? http://jsfiddle.net/LyndseyB/GJLCF/.

 

Hope it's useful

Lyndsey,

 

I think thats EXACTLY what I'm looking for!

I'll try it asap and let you know.

Thank you so much!!

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!

What are you trying to achieve Jimmymustang ?

Maybe you should make a new thread.

 

Léon

What are you trying to achieve Jimmymustang ?

Maybe you should make a new thread.

 

Léon

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.

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.

No problem, good luck with your project !

 

Léon

Was this ever concluded? I'm looking to create a quote builder such as the "Jane's Ironing Service" one (http://www.janesironingservice.com/calculator.php) except made from text input boxes (numerical) and tick boxes instead of dropdown boxes.

 

Any help is much appreciated. Cheers!

Duan

Edited June 7, 201313 yr by Duan_D

Was this ever concluded? I'm looking to create a quote builder such as the "Jane's Ironing Service" one (http://www.janesironingservice.com/calculator.php) except made from text input boxes (numerical) and tick boxes instead of dropdown boxes.

 

 

Any help is much appreciated. Cheers!

 

Duan

 

 

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/

Thanks jimmymustang! That helped ALOT! I've made a new post on that thread now.