The simplest way to do this would be to insert
all the markup for your multi-stage form into the $.dialog() box, and use CSS to hide the different steps.
Every time the user clicks 'next', simply hide the previous step and show the next one. For example, you markup would be as so:
Code:
<form action="/" method="post" id="multi-form">
<fieldset id="step-1">
<label>Step 1</label>
<some form fields... />
<a href="#step-2" class="next-link">Next</a>
<fieldset>
<fieldset id="step-2" class="hidden">
<label>Step 2</label>
<some form fields... />
<a href="#step-3" class="next-link">Next</a>
<fieldset>
<fieldset id="step-3" class="hidden">
<label>Step 3</label>
<some form fields... />
<input type="submit" value="Submit" />
<fieldset>
</form>
Class "hidden" having a rule of "display: none;" or such. And your js something like this:
Code:
$('#multi-form .next-link').bind('click', function(e) {
e.preventDefault();
var parentFieldset = $(this).parents('fieldset);
parentFieldset.addClass('hidden').next('fieldset').removeClass('hidden');
}
Hopefully that's simple enough to understand what's going on.
Doing it this way means your multi-stage form is accessible without JS, and you don't need to worry about storing form data between each step - the form will work like a traditional input form.
If you do want to pass data to PHP during the form input process, for validation perhaps, you'll need to bind $.ajax() events to your next buttons i.e. on the click event of the next button, an $.ajax() request would fire that pulled the current step's form data out and passed it to PHP. PHP would then need to process this and send an appropriate response back. On the success/complete callback function of $.ajax(), you can decide to show/hide the next stage of the form or show validation errors.
