Multi-Step Post with Php and Javascript?

Question

i have a 4 step form , i made it like 4 pages formstep1.php , formstep2.php , formstep3.php . These forms belongs to different tables on database..

I want to make it like for example ; when i submit the first form , current page shouldnt refresh ,but change div content and call second form with loading image.. I mean

if first form post successful { call second form with loading image in to a div.. }

if second form post successful { call third form with loading image in to a div.. }

how should i do it? what is the best aproach? sorry for my english , and thank you for your help

Techie · Answer 1 · 2013-01-31T18:13:03.560

Rather than having multiple forms, have a one form where all the input fields are contained. Depending on the step you are in, use CSS to hide the divs to show the relevant inputs for the particular setp. At the last step submit the form.

EG :

div 1 - > step 1 - > contains input 1,2,3
div 2 - > step 2 - > contains input 4,5,6
div 3 - > step 3 - > contains input 7,8,9
div 4 - > step 4 - > contains input 10,11,12 -> submit the form

When you are in step 1 show the div 1 and hide all other divs. Likewise you can proceed.

CSS :

display : none; to hide the divs.

Jquery :

depending on the step add the special class to the divs, so the particular divs will be hidden.

If you need validation you can use jquery to get it done.

at the PHP level you can insert the data as required to your different tables.

It would be really nice to have a single form post rather than refreshing the page multiple times.

One of the reasons this might not be ideal is because you might want to store the data for abandonment reasons. Let's say they want to learn more about the offering before completing the form. They will have to re-input all of the data if they leave on step 2. — Du3, Oct 13 '14 at 20:02

Vedant Terkar · Answer 2 · 2013-01-31T18:37:06.567

Why Dont you try AjaxForms :- http://jquery.malsup.com/form/

 <html>
 <head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script> 
 <script type="text/javascript">
 $(document).ready(function() { 
      $("#form2").fadeOut('slow',function(){
      $("#form2").css({"visibility":"hidden"});
      });
      $("#form3").fadeOut('slow',function(){
      $("#form3").css({"visibility":"hidden"});
      });
      $("#form4").fadeOut('slow',function(){
      $("#form4").css({"visibility":"hidden"});
      });

                  // bind 'myForm1' and provide a simple callback function 
        $('#myForm1').ajaxForm(function() { 
            $("#form1").fadeOut('slow',function(){
             $("#form2").fadeIn('slow',function(){
             $("#form1").css({"visibility":"hidden"});
             $("#form2").css({"visibility":"visible"});
             });
           });
            }); 

   $('#myForm2').ajaxForm(function() { 
            $("#form2").fadeOut('slow',function(){
              $("#form3").fadeIn('slow',function(){
             $("#form2").css({"visibility":"hidden"});
             $("#form3").css({"visibility":"visible"});
             });
           });
            }); 

  }); 
</script>
</head>
<body>
<div id="form1">
<form id="myForm1" action="formstep1.php" method="post"> 
Name: <input type="text" name="name" /> 
Comment: <textarea name="comment"></textarea> 
<input type="submit" value="Submit Comment" /> 
</form>
</div>
<div id="form2">
<form id="myForm2" action="formstep2.php" method="post"> 
Likes: <input type="text" name="name" /> 
Adress: <textarea name="comment"></textarea> 
<input type="submit" value="Submit Data" /> 
</form>
</div>
</body>
</html>

I think it'll be useful for you...

Multi-Step Post with Php and Javascript?

2 Answers2