Need to build a specialized input form that walks the user through step by step

I'm in a bit of a pickle here. I need to build a specialised walk through form to take in input for a company profile. The trick is that all of teh inpuyt should be done in the form of seven small forms on the same page that open one after the other as and as one is filled.

For an example I have on the page 7 forms:

Form 1 - Name form which just has a name of the company Upon filling form 1, form 2 opens up and form 1 closes showing the name of the company in its place Form 2 takes in contact details. Once this form is filled in and submitted the form is hidden and in its place all the contact details are displayed and form three opens up

I'm quite stuck on how to implement this开发者_JS百科 strategically. Since all teh forms here would be ajax based forms to begin with. The reason behind having so many mini forms is to avoid creating one huge form.

This is a bit of s step by step form.

Any ideas? Let me know if you need more elaboration.

If i understand correctly you want a form wizard.

Have a look at a jQuery implementation at http://thecodemine.org/

If you want a bit more control I'd go with jQuery and create yourself.

Create the froms in HTML on one page and have them hidden via CSS.

$('#form1').submit(function(e) {
e.preventDefault();

     $.post('/form1/', {companyname:companyName}, function (html) {

     if(parseFloat(html)){ // input data valid  

 $('#feedback').html(html.substring(1, html.length)).show(); // show company name

          $('#form1').hide();
          $('#form2').show();
     } 
     else // invalid input data
     {
     $('#feedback').html(html).show(); // show errors
     }

     });


});

Is pretty much what you will want.

parseFloat is used as a check to quickly see if a successful submit has been made. It is true if the data you return starts with a number. html.substring(1, html.length)) takes off this number so it doesn't show up when outputting to the page.