title: Show Form div again after displaying success message without Page Refresh Using PHP AJAX
body: <p>i am newbie to php and ajax. I want to submit a form without page refresh. Which i achieved Successfully. the form after submission displays the success message. But i want that after success message. The result fades Out and shows the empty form fields again. so that i can submit anouther form again.</p>
  
  <pre><code>&lt;script src="assets/jquery-1.12.4-jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="assets/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  $(document).ready(function() {  
  
  // submit form using $.ajax() method
  
  $('#reg-form').submit(function(e){
  
      e.preventDefault(); // Prevent Default Submission
  
      $.ajax({
          url: 'submit.php',
          type: 'POST',
          data: $(this).serialize() // it will serialize the form data
      })
      .done(function(data){
          $('#form-content').fadeOut('slow', function(){
              $('#form-content').fadeIn('slow').html(data);
              $('#form-content').fadeOut('slow').html(data);
              $('#form-content').fadeIn('slow').html();
  
          });
      })
      .fail(function(){
          alert('Ajax Submit Failed ...');    
      });
  });
  </code></pre>
  
  <p>});
  </p>
  
  <pre><code>&lt;div id="form-content"&gt;
  
          &lt;form method="post" id="reg-form" autocomplete="off"&gt;
  
              &lt;div class="form-group"&gt;
                  &lt;input type="text" class="form-control" name="txt_fname" id="lname" placeholder="First Name" required /&gt;
              &lt;/div&gt;
  
              &lt;div class="form-group"&gt;
                  &lt;input type="text" class="form-control" name="txt_lname" id="lname" placeholder="Last Name" required /&gt;
              &lt;/div&gt;
  
              &lt;div class="form-group"&gt;
                  &lt;input type="text" class="form-control" name="txt_email" id="lname" placeholder="Your Mail" required /&gt;
              &lt;/div&gt;
  
              &lt;div class="form-group"&gt;
                  &lt;input type="text" class="form-control" name="txt_contact" id="lname" placeholder="Contact No" required /&gt;
              &lt;/div&gt;
  
              &lt;hr /&gt;
  
              &lt;div class="form-group"&gt;
                  &lt;button class="btn btn-primary"&gt;Submit&lt;/button&gt;
              &lt;/div&gt;
  
          &lt;/form&gt;
  
          &lt;/div&gt;
  </code></pre>
  
  <p>submit.php</p>
  
  <pre><code>if( $_POST ){
  
  $fname = $_POST['txt_fname'];
  $lname = $_POST['txt_lname'];
  $email = $_POST['txt_email'];
  $phno = $_POST['txt_contact'];
  
  ?&gt;
  &lt;table class="table table-striped" border="0"&gt;
  
  &lt;tr&gt;
  &lt;td colspan="2"&gt;
      &lt;div class="alert alert-info"&gt;
          &lt;strong&gt;Success&lt;/strong&gt;, Form Submitted Successfully...
      &lt;/div&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr&gt;
  &lt;td&gt;First Name&lt;/td&gt;
  &lt;td&gt;&lt;?php echo $fname ?&gt;&lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr&gt;
  &lt;td&gt;Last Name&lt;/td&gt;
  &lt;td&gt;&lt;?php echo $lname ?&gt;&lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr&gt;
  &lt;td&gt;Your eMail&lt;/td&gt;
  &lt;td&gt;&lt;?php echo $email; ?&gt;&lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr&gt;
  &lt;td&gt;Contact No&lt;/td&gt;
  &lt;td&gt;&lt;?php echo $phno; ?&gt;&lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;/table&gt;
  &lt;?php
  </code></pre>
  
  <p>} ?></p>
  
  <p>please help me out.you can see the working example here
  <a href="http://demos.codingcage.com/ajax-form-submit/" rel="nofollow noreferrer">http://demos.codingcage.com/ajax-form-submit/</a></p>