View Full Version : Calculations based on user input

07-14-2010, 12:29 PM
Dear expert (Ok, i am new to this and should maybe not address this as a letter )

I hope someone can help me ... this is what i want to achieve (I am using frontpage)

I want to create a table (this i can do!) that require a user input (number of guests).

It then has SEVERAL options:

- Select an option from a drop down list, and a price is then loaded from somewhere to create a total for that option and display it in the table (And keep that total for adding later)

- Check a box, and if checked it creates a further calculation, displaying and storing the number for further calculation.

a number of the above options, and a grand total on the bottom.

I found more or less a page on a site that does what i am looking for, but after looking at the code, i have even LESS of an idea how it works

Can someone PLEASE help me, or point me in the right direction?

(I am not looking for someone to just write the code for me, as this will not teach me anything, and i want to learn)

Below is a link to the example ..


Thank you!

07-14-2010, 12:58 PM
I am using frontpage


There are lots of free code editors (http://www.smashingmagazine.com/2008/05/07/35-useful-source-code-editors-reviewed/) out there, and they're all less likely to break your code for you than Frontpage.


Regarding your question: I can't tell you how to build something. Only you know how you want it to work.

Break it down into steps: you say you can manage the table part: fine. Do that. Build the table. Then what? You need some form elements in the table, to collect user input. Stuck on that? Cool: post what HTML you've got, and ask about putting HTML forms on a page. (If that's what you're stuck on, you might want to ask that in the HTML forum, not in here). Once you've got your input boxes appearing, you need to start retrieving data from them: we can help with that in here, but we need to see the HTML that we're dealing with.

Make sense?

function code()
07-14-2010, 03:33 PM

I have written something similiar in the past, take a look of the code below. It doesn't do exactly what you want to do because like you say it is better for you to learn it and do it for yourself that way you will understand it better. The code below extracts everything you will need to make it work. you will just have to had a function to calculate the selected option and the sub total. Hope this helps...

<script type="text/javascript">
function selectReasons()
var index = document.getElementById("Name").selectedIndex;

var selectionValue = document.getElementById("Name").value;

var selectionText = document.getElementById("Name").options[index].text;

/* *****this is only used as a bread crumb to display the output ******
document.getElementById("Name").innerHTML = selectionValue + "<br />" +
then add selected option and sub total
return total;





<select id="Name" onChange="selection(this.value);">
<option value="0">Please select</option>
<option value="1">Illness</option>
<option value="2">Complaint</option>
<option value="3">Class Closed</option>
<option value="4">Move from Area</option>
<option value="5">Other</option>

07-14-2010, 05:59 PM
Cool, thanks for both replies, and the script. I will go through it this evening and start learning.

But expect a couple of questions :P

07-15-2010, 07:26 AM
Despite the chance to look really stupid, here is what i did. Instead of complicating things from the start, i tried to create a input (number of guests), and if the number is below a certain value, the rate is x, else the rate is y.

It then needs to calculate a cost (guests * rate) and display it ..

it seems simple, but yet, i am missing something ... here is the code


<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>


<SCRIPT language=Javascript>
if(guests < 30) { meat_pp = 999.00 ; } else
meat_pp = 200

meat_cost = guests * meat_pp

<form method=post name=calc action=#>
<INPUT onchange=calc_price(this.form) maxLength=4 size=2 name=guests>
<p><INPUT value=R0.00 readOnly size=8 name=meat_cost></p>

(perhaps signing up for javascript 101 will be better)

07-17-2010, 10:48 AM
So i think i am learning!
Thanks for the replies, I broke it down to the basics, and started one step at a time, and it seems to be working. Ok, granted it is taking a lot of time, but i am learning, and that seems to be the most important

Due to not wanting to flood the page with script, here is the link to how far it is right now ..


Old Pedant
07-18-2010, 12:40 AM
Well, clearly your calculations work, but I think you are making it really really hard to later make changes, adjust prices, etc.

I think it would be better if you would instead think in terms of *TABLES*.
Data tables, that is.

Maybe something like this:

var breaksAt = [ 50, 70, 90, 110, 130, 150, 200, 250, 300, 350, 500, 9999999 ];
function ItemCost(
n50, n70,n90,n110,n130,n150,n200,n250,n300,n350,n500,nmore )
this.itemName = iname;
this.itemId = iid;
this.minCost = imin;
this.costsPer = [n50,n70,n90,n110,n130,n150,n200,n250,n300,n350,n500,nmore];

var Items = [
new ItemCost( "Lamb on the spit", "lamb", 2100.00,
69.80,63.80,62.98,62.38,61.77,61.15,61.10,58.61,57.16,55.75,55.03,55.03 ),
new ItemCost( "Traditional braaivleis", .... etc ... ),

And then you can drive *ALL* the calculations off that table.


v_guests = ... get number of guests ...
// find which breakpoint applies to this number of guests:
var breakpoint = -1;
for ( var n = 0; n < breaksAt.length; ++n )
if ( v_guests >= breaksAt[n] )
breakpoint = n;
break; // out of loop
// then get cost for each item:
var total = 0;
for ( var inum = 0; inum < Items.length; ++inum )
var Item = Items[inum];
var id = Item.itemId;
var cost = 0;
if ( form.elements["cb_" + id ].checked )
cost = Item.costsPer[breakpoint] * v_guests;
if ( cost < Item.minCost ) cost = Item.minCost;
form.elements["cost_" +id].value = Money( cost );

Presto! *ALL* the items done at once!

I've changed your <form> to look something like this:

<input name="cb_lamb" type="checkbox" onclick="recalculate()" />
Lamb on the spit
<input name="cost_lamb" readonly />

And the Money() function could be as simple as this:

function Money( amt )
var m = amt.toFixed(2);
if ( m.length > 6 ) m = m.substring(0,m.length - 6) + "," + m.substring(m.length - 6);
return "$ " + m;

07-18-2010, 06:30 AM
Thank you!

Thats the problem, i only started last week with coding so i know there is still a LOT to learn.

Thanks again for the post, i will look at it and figure out how it works :)

08-01-2010, 07:07 PM
So i managed to get the first version of this done ..


The next problem i am sitting with is ... it creates a ballpark figure, how do i get it to with the click of a button, email me all the contents of the form in order to work out a valid quotation ?

Philip M
08-01-2010, 07:14 PM
The next problem i am sitting with is ... it creates a ballpark figure, how do i get it to with the click of a button, email me all the contents of the form in order to work out a valid quotation ?

You don't. The trouble with using this method (mailto) to send form results is its unpredictability. The method it is highly dependent on the browser in use and the email client in use (some people have only Yahoo or Hotmail). In particular, your visitor must have Outlook or Outlook Express as the default client for this to work correctly. Even if your visitor is using Internet Explorer, but the default mail client is different (e.g. Eudora), your mailto form will not work. With all of the browser troubles, you're likely to lose about half of your users' messages. Most of the email clients that can successfully send a mail will prompt the user by a security dialog prior to sending - this can scare many users from continuing. Also, what about people with Javascript disabled?

In fact few browsers these days accept mailto: as a form action. You need a really old browser for it to work as more modern browsers simply open the email program (if any) and ignore the form. If you are going to use a form then use a server-side formmail script as the action - there are several good free ones out there.