Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win


Javascript cascading selection with hidden options

Posted on 2013-02-01
Medium Priority
Last Modified: 2013-02-01
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!
Question by:consulatlanta
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
LVL 38

Expert Comment

by:Tom Beck
ID: 38843375
With javascript only, no server side coding? How are you recording the answers?

Author Comment

ID: 38843580
Hello Tommyboy,

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

LVL 38

Accepted Solution

Tom Beck earned 2000 total points
ID: 38843705
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.

Author Comment

ID: 38843760
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!
LVL 38

Expert Comment

by:Tom Beck
ID: 38843834
Good luck with the project. Thanks for the points.

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

636 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question