Solved

Javascript cascading selection with hidden options

Posted on 2013-02-01
5
171 Views
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!
Richard
0
Comment
Question by:consulatlanta
  • 3
  • 2
5 Comments
 
LVL 38

Expert Comment

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

Author Comment

by:consulatlanta
ID: 38843580
Hello Tommyboy,

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

Richard
0
 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 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.
0
 

Author Comment

by:consulatlanta
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!
0
 
LVL 38

Expert Comment

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

Featured Post

NAS Cloud Backup Strategies

This article explains backup scenarios when using network storage. We review the so-called “3-2-1 strategy” and summarize the methods you can use to send NAS data to the cloud

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…

777 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