Multipage web form survey help

[nanewk]

Ola,

I have been tasked with the mission to build a web form survey that will utilize skip logic, aka conditional branding. Now, I know my fair share of HTML and can get buy with building a web form with one page and a submit button that uses POST and calls to a PHP script to handle the job, but, I am in the dark when it comes to building a survey with next buttons and a form that utilizes skip logic, ie: if user selects "no" goto page 3.. I gather this task will include a steady heap of if else statements. My question is how would I build a web form that shows different 'layers' or 'pages' all in one index page? I would prefer not to build 5 to 6 pages for each step in the survey. What is the best solution to complete this task? I'm a newb, please take it easy.

Regards,

-n

[daveVk]

I would consider building it as one form/page where various sections are hidden dependent on particular field values. Provided the alternate paths are not to diverse, this avoids a lot of complexity.

[nanewk]

daveVK, thanks for the input. I was imagining just that myself but am curious to how I would achieve the hidden effect. As luck has it, I've been running into brick walls on this project.

[Fotiman]

You would need to partition your form into logical groups (ie: 'layers' or 'pages'). It might make sense to use fieldset (for semantic reasons), or generic div elements for the partitioning:

<form action="#" id="myForm">
<div>
  <div id="myForm_page1">
  </div>
  <div id="myForm_page2">
  </div>
  <div id="myForm_page3">
    <input type="submit" ...>
  </div>
</div>

For user's with JavaScript disabled, the form remains entirely usable as-is.

You would then need some JavaScript to do the following:
1. Insert "Previous" and "Next" buttons into each panel
2. Attach listeners to the previous and next buttons that would show/hide panels, and define the logic that controls which panel to show next.

[Fotiman]

but am curious to how I would achieve the hidden effect

There are several methods for hiding content. The most common is probably to set the display style property to 'none'. For example:

var el = document.getElementById('myForm_page1');
// hide it
el.style.display = 'none';
// unhide it
el.style.display = '';

[daveVk]

Is there a need for need for "Next" buttons and "goto" logic ?. It may suffice for example, to just hide/show the smoking question(s) when the smoker box is ticked/unticked.

[nanewk]

daveVk - I appreciate the advice. As of now I am trying to keep it simple as possible, and to be honest I'm not sure if that is more complex.

The way I plan on tackling this task is im writing out the form on one page in a layout to what Fotiman described above. Once I'm happy with that I will *try* to apply the javascript needed to hide the 'pages' or 'layers'.

Thank you all for the advice so far, it's really keeping me going!

[daveVk]

You need to identify which questions (or groups of questions) are conditional and put divs around them, you will most likely end up with the structure Fotiman suggests, if you have multiple levels of conditionality ( eg smoker and heavy smokers ) a nested structure will result, no problem.

Considering the conditional sections(divs) to be 'pages' or 'layers' seems to adding complexity that may not be required.

[nanewk]

Yes, my boss wants next and back buttons. This, so far, has been a some what frustrating javascript crash course.

[Fotiman]

If you have JavaScript questions, feel free to ask them here. :)

[daveVk]

It may be useful to make a paper model of whats needed. This should clarify the complexity of the task for this particular survey.

Ignoring conditionals determine how many parts(pages) there are and what questions go in each part. Determine the exact function of next/prior button, do you have to complete part1 before going to part2 etc.

Next consider conditional sections.
- do they correspond to parts ?
- determine the condition test for each
- determine extra logic required to go to correct next/prior part

[nanewk]

First off thank you both daveVk and Fotiman for your help so far. I have the skeleton of my form so far. I have 9 divs set as my 'layers'. Inside the layers I have added the appropriate questions, etc. Only 3 of my 'layers' have conditionals which def simplifies the process.

I'm a total JavaScript newb, so off to Google.

[nanewk]

Update:

I did find a site that helped me complete the task of creating next buttons that hide/show the divs (w00t!) and i actually kind of understand the code too (w0000t!) The only problem is that when the page loads it shows all the divs - once I click the first next button all the divs hide from there on and the form functions properly.

Is there a built in JavaScript function that will hide all the layers except my first layer I was seen?

Thanks!

[Fotiman]

When your page loads, you need to call the function that hides all of the divs except for the first one. This would probably be the equivalent of what the "previous" button does on your 2nd div.

[sundaridevi]

For user's with JavaScript disabled, the form remains entirely usable as-is.

Does this mean that if JavaScript is disabled all the fields are displayed by default? Is there anyway to do this entirely without JavaScript?

[Fotiman]

Correct, without JavaScript all of the form fields would be displayed. If you wanted to have the form conditionally display certain sections depending on previous input with JavaScript disabled, you would need to have multiple "pages" (that is, your form would have to be submitted for each page and then the server would need to serve up the next page).

[nanewk]

I solved that problem using an inline style attribute.

<div id="form2" style="display: none">

I used that for all 8 or 9 div's on my page, worked wonders.

As far as the skip logic goes, I haven't even attempted it yet. :/

[Fotiman]

Gah!
You've just made the form inaccessible for all users with JavaScript disabled. :(
That's why I said, when your page loads you want to call the function that hides the panels (rather than just hard coding a hidden style for them).