I have a form that has multiple sections, and rather than present it as one long, large form I’d like to present it to the user in bite size logical units. I originally thought of using ajax to present each “logical unit,” one at a time. However, this would lead to multiple back-end requests. I then thought of having the full form downloaded at page load time, and then using js/css to display the form in the desired logical units and then upon submission have one call to the back-end.
I’m curious has to what others think and what are their thoughts on the above two approaches. Also, I’m interested in any other approaches. Thanks.
Personally I would opt for loading the entire form once, and placing its content in tags that you show/hide depending on the “section” that the user is on.
This way only 1 server request is made, when the form gets submitted.
This also means that when search spiders go to that page, they would be able to read the entire form.
Additionally, you would then be able to show the entire form, and hide all the required elements with JS. In this way if JS is disabled on the user’s browser, they would still be able to continue filling out the form.
An approach I’ve used several times is to use server-side logic to render different parts of the form for each request.
The first request shows the first part of the form.
The second request shows the second part, keeping the values from the first part in hidden fields.
The third request shows the third part, keeping the values from the first and second parts in hidden fields.
And so on.
Such a form can even have Back buttons, allowing the user to go back and modify previously submitted parts.
Ajax is not a viable solution, since it won’t work for those of us who surf with JavaScript off by default.
Loading the entire form in one go and showing/hiding the parts with JavaScript as TommiChi suggested works (if done right), but may be impractical for a really large form, especially on mobile devices or other low-bandwidth situations.