Multi Step Form With JQuery Which Degrades Nicely If JS Is Turned Off

I currently had my form set up so that each section was refreshed using Ajax, however it didn’t degrade gracefully with JavaScript turned off and I’ve looked into putting each

Solution 1:

You might consider using one long form divided into sections, and then if JavaScript is enabled you hide all but one section at a time, providing navigation between the sections (via tabs, for instance).

Alternately, you could look at using script and noscript sections, but then you end up duplicating the form (once in the script sections, once in the noscript sections) and it starts getting to be a maintenance problem.

Solution 2:

What you do wrong is that you're thinking reverse. When you have it working with javascript disabled then it's much easier to apply some javascript functionality.

In addition to that I would display different forms based on wich step in the process the user are. And to that form pass the values from the last step into hidden fields. That way you can have a "step"-registration without js enabled.

?step=1 and let say you use php <?php if (isset($_GET['step']) && $_GET['step'] == '1'): ?>

Then just reload the part that contains the form with ajax.