views:

146

answers:

2

I'm a beginner and trying to generate as much of my own code as possible without just constantly asking others to write it for me, so with regard to this question I'm looking for hints in the right direction, rather than outright working examples. You people are all very talented, but I learn best if I reason it out myself. Should I hit a brick wall, I'll be sure to ask specifics. :-)

I want to build a form for MySQL query that has a rather lot of checkbox options, not all of which most users would be interested in at one time for one search. Rather than present a massive form, I'd like the first few options to control how many of the subsequent choices are available to select from, without going to a new page (if possible).

Hypothetical example: a database of movie actors, wherein each actor's nationality is included, and by choosing an assortment of actors the form query will return all movies they appear in together.

ACTOR NATIONALITY
[] Any
[] German
[] Russian
[] British
[] American
[] Japanese
[] Chinese

at first no further information is displayed. Should the user check [] Any then the full form is revealed:

German   Russian   British   American   Japanese    Chinese
[]GER1    []RUS1    []BRIT1   []AMER1    []JPN1      []CHN1
[]GER2    []RUS2    []BRIT2   []AMER2    []JPN2      []CHN2
[]GER3    []RUS3    []BRIT3   []AMER3    []JPN3      []CHN3
 etc.

but if the user is only interested in say, German & Japanese actors, he would check those two boxes and the following would then appear below:

German   Japanese 
[]GER1    []JPN1
[]GER2    []JPN2
[]GER3    []JPN3

am I making sense?

My coding knowledge at this point is confined to PHP/MySQL, so a solution that only incorporates PHP would be ideal, but if javascript is required please point me in the right direction and I will endeavor to add the necessary knowledge!

Thank you!

EDIT - yes, all the checkbox info is being pulled from a database

+2  A: 

I guess go with javascript.

I would probably put the sub selections in TDs or DIVs and have them hidden with style="display:none" and on the checkboxs onclick event , if the checkbox is checked , i would set that specific TD to become visible .. you can also put in some more javascript code to make sure that the checkboxes in the hidden TDs or DIVs are unchecked. and also do some validation again on the PHP end. If ANY is checked , have ur function display all the TDs or DIVs.

More info:

This would require minimal javascript from what i see. and PHP should be pretty straight forward as well , as you would just pull everything and echo on the page and only hide the DIV from the user to see, unless he actually wants to see it. Using PHP would increase Page loads unless you go with AJAX , which might be an overkill.

So you will mainly be dealing with the display property of the style attribute from javascript , should be simple.

Sabeen Malik
Thank you Sabeen!
Andrew Heath
i am glad it made sense :)
Sabeen Malik
+1  A: 

I agreed with Sabeen; javascript is the way to go, but I would use ajax methods rather than hiding other form elements...

You can use js to "listen" to events happening to the first checkbox group (ie onclick, onmouseover, whatever) and when a change is made, you can use ajax methods to send the form data to a small php script. This script then figures out which sub-menus build, and returns the relevant html fragment to the calling php script. Js takes this response and manipulates the DOM to add the new checkbox group to the page, all without the need for an entire page reload.

If you're new to the world of js / ajax then I can throughly recommend jQuery. Other flavours of js framework (off the top of my head) include Prototype, MooTools, Dojo.

I hope that wan't too vague, you did say you wanted a push in the right direction, rather than concrete examples! :)

EDIT. I should mention that I've assumed the data that's driving these checkboxes is coming from a db. If not, then Sabeen's method is simpler to implement and incurs a much smaller execution overhead.

MatW
That's a very informative answer, thank you. Are there any important terms or keywords related to what I'm trying to do that I should know? Knowing the correct terminology always makes locating more information easier.
Andrew Heath
ajax and dom manipulation are the big ones. You can't go far wrong if you investigate one of the js frameworks with those two things in mind.
MatW
FYI - AJAX (Asynchronous Javascript And XML) and DOM (Document Object Model)
MatW