Javascript cascading selection with hidden options

Hello everyone,

I would like to create a page with a questionnaire where people progressively select options based on answers they provided.  I would like to keep the page clean and thus only offer options that make sense for someone to select.

This could be something like someone choosing a country, then a region within the country selected, then a city within the region that was selected.

Could also be a bit more complicated such as a questionnaire with groups of questions to topics such as:

A Do you want to provide your address? Yes  -> show various fields  then show question B  No -> go to question B but don’t show question C yet, allow to choose yes at a point afterwards
B Do you now want to talk about your education?  Yes then show options,  no --> skip to C  same as above
C Do you want to enter some personal words?
… etc

I hope I didn’t make this too complicated. Does anyone have a template or suggestion how this can be achieved?

Many thanks!
Who is Participating?
Tom BeckConnect With a Mentor Commented:
You may want to have "PHP" added to the Topic so that PHP experts can weigh in. I am not a PHP expert.

Since server side scripting is available, the obvious method would be to re-build all or part  (ajax) of the page on the server side based on the responses provided by the end user. Simple conditionals in the PHP code would determine what question to ask next or what form to present. To limit the number of postbacks, you could handle simple yes or no responses on the client side and use server side processing only for recording relevant information.

Example of mixing server side and client side code to reduce postbacks would look like this:
You present the question "Do you want to provide your address?" In the markup of the page you also include the address form but set it to display:none. If the user chooses "Yes", you toggle the display of the address form to block . The user fills out the form, clicks "Next", the server looks for form data on postback and records the address info and then builds the next question page. The process repeats. If the user answers "No", no form data is provided and the server handles the postback by simply presenting the next question.

On the server side, you could do this with one large php file with conditionals determining what to print to the response OR you could redirect to a new php page for each step in the questionnaire with one common php file included to handle database read/write operations OR you could have one template page which you customize with questionnaire content extracted from a database or even a flat file like an XML file. Lots of possibilities.
Tom BeckCommented:
With javascript only, no server side coding? How are you recording the answers?
consulatlantaAuthor Commented:
Hello Tommyboy,

sorry, will be embedded into a php page and the answers will be recorded in a database.

consulatlantaAuthor Commented:
Thank you! I probably prematurely asked the question without giving much thought into the possibilities that you mentioned. I will close the question for now and re-ask when I can get some more info.
Thank you so far!
Tom BeckCommented:
Good luck with the project. Thanks for the points.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.