conditional form options?

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

I hope this title makes some sense!

What I'm trying to do is to create a fee calculator. The calculator would add fees for residence and meal plan and come up with a total. The fee for residence is dependent on the academic term, residence facility and room type. Only certain room types are available in each residence. Meal plan options are also dependent on the residence facility (i.e. only certain options are available for each residence).

What I want is for the form to only display the available options depending on what the user chose in the last option. This is the same as what happens on forms sometimes if, say, you choose your country and it automatically chages the state/province list to match.

The form would look something like this:

Term: (fall/winter/spring)
Residence facility: (changes based on term)
Room Type: (changes based on the residence facility selection)
Meal Plan: (changes based on the residence facility selection)
Total: (calculated based on above options)

How do I do this??? I have no idea what's required - can I do this with javascript? Do I need some server side processing??? I could send this downstairs to our web apps guy to do but I'd like to at least try it myself.

Busy's picture

He has: 6,151 posts

Joined: May 2001

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

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

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!

Abhishek Reddy's picture

He has: 3,348 posts

Joined: Jul 2001

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:

  1. Define each term (just a name, really) and group them in one array.
  2. Define each residence, including a reference to which parent term(s) it can be in, and its cost, and group in another array.
  3. ... similarly for room types and meal plans, with references to parent residences.
  4. Populate the first selection box with all terms, leaving the other boxes empty.
  5. 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.
  6. ... similarly for the onChange event on the residences selection, filter out room types and meal plans, and populate their boxes.
  7. 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. Smiling

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

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's picture

He has: 3,348 posts

Joined: Jul 2001

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. Smiling

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

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 Smiling

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

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

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.