Megan — Mon, 30 Apr 2007 20:41:31 +0000

I'm back at this again! I had put it on the back burner for awhile but my boss mentioned that it would be good to have for our next marketing push.

Now I'm thinking about using some combination of PHP & javascript. Now I have all the possible values stored in three database tables (residences - for the residence names & types, meal plans - for the meal plan types & costs, and details.Oops, forgot something for the terms available ... hmmm...)

Anyway, does anyone have any suggestions for how I could pull the values from the database and then change the available items when something from one field is selected?

Here is my current prototype page (a bit of a mess right now):

http://www.housing.uwaterloo.ca/_testbed/calculator/calculator.php

Megan — Mon, 16 Oct 2006 16:05:26 +0000

Okay, well, I'm sorting through some of the other options but I might try what you've got there and see how far I get

Abhishek Reddy — Mon, 16 Oct 2006 15:45:45 +0000

Megan;208815 wrote: Yikes, that sounds scary! I'm fiddling around with this and doing what I can - I have no idea how to do a lot of what you mentioned there! Will have to work on my javascript a lot! I found a lot of premade scripts and tutorials and stuff so I'll work from there...

Don't worry, it only seems scary because I've run through it very quickly from top to bottom. I'm hoping it'll give you ideas if you should get stuck, rather than prescribing a solution.

Megan — Mon, 16 Oct 2006 15:36:14 +0000

Yikes, that sounds scary! I'm fiddling around with this and doing what I can - I have no idea how to do a lot of what you mentioned there! Will have to work on my javascript a lot! I found a lot of premade scripts and tutorials and stuff so I'll work from there...

Abhishek Reddy — Mon, 16 Oct 2006 15:19:39 +0000

It's an interesting problem, and definitely do-able on one page with Javascript alone.

A rough sketch of one possible approach for the script:

Define each term (just a name, really) and group them in one array.
Define each residence, including a reference to which parent term(s) it can be in, and its cost, and group in another array.
... similarly for room types and meal plans, with references to parent residences.
Populate the first selection box with all terms, leaving the other boxes empty.
When the onChange event happens for the terms selection box, filter away all the residences which aren't children the chosen term, and populate the residences selection box with the result.
... similarly for the onChange event on the residences selection, filter out room types and meal plans, and populate their boxes.
Either keep a running total, or calculate the total when the last item is chosen, and display it.

For steps 1-3, you could use prototypes to define terms etc and their properties. To filter and populate the selection boxes, you'd loop over the arrays, and use the DOM Node methods to add elements.

I guess that'll be the basic functionality. From there, it would be easy to make it possible, say, to:

make the selections in any order (maybe starting with a residence, and it changes the term options).
highlight with some styling which options haven't been explicitly chosen.
have default "heading" options.
write the initial data in a simpler form (like comma-separated text), and have the script generate prototypes from that.

Megan wrote:
But then, I haven't coded javascript myself in years so this could be an adventure!

Should be fun! Remember to build it incrementally and keep it simple. Good luck.

Megan — Mon, 16 Oct 2006 13:27:31 +0000

Thanks, Busy. It will be on just one page I think. I think the calculations would be easy. Switching the values for each form depending on another value is what I'm really not sure about.

But then, I haven't coded javascript myself in years so this could be an adventure!

Busy — Fri, 13 Oct 2006 21:10:15 +0000

Is it to be done on one page or several?

Javascript is the only way if on one page (with use of css of hiding the other stuff etc) but if you want several pages then just server side or static html would do.

Have a look for javascript quiz code if you want some base code to work from, something from this lot may be of some help

http://javascriptkit.com/script/script2/picklist.shtml
http://javascriptkit.com/script/script2/picklist2.shtml
http://javascriptkit.com/script/script2/comboquiz.shtml
http://javascriptkit.com/script/cut180.shtml
http://javascriptkit.com/script/cut142.shtml