Solved

Javascript cascading selection with hidden options

Posted on 2013-02-01
5
168 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
Comment Utility
With javascript only, no server side coding? How are you recording the answers?
0
 

Author Comment

by:consulatlanta
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Good luck with the project. Thanks for the points.
0

Featured Post

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
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…

762 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now