Show Form div again after displaying success message without Page Refresh Using PHP AJAX

Question

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.

<script src="assets/jquery-1.12.4-jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>

<script type="text/javascript">
$(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 ...');    
    });
});

});

<div id="form-content">

        <form method="post" id="reg-form" autocomplete="off">

            <div class="form-group">
                <input type="text" class="form-control" name="txt_fname" id="lname" placeholder="First Name" required />
            </div>

            <div class="form-group">
                <input type="text" class="form-control" name="txt_lname" id="lname" placeholder="Last Name" required />
            </div>

            <div class="form-group">
                <input type="text" class="form-control" name="txt_email" id="lname" placeholder="Your Mail" required />
            </div>

            <div class="form-group">
                <input type="text" class="form-control" name="txt_contact" id="lname" placeholder="Contact No" required />
            </div>

            <hr />

            <div class="form-group">
                <button class="btn btn-primary">Submit</button>
            </div>

        </form>

        </div>

submit.php

if( $_POST ){

$fname = $_POST['txt_fname'];
$lname = $_POST['txt_lname'];
$email = $_POST['txt_email'];
$phno = $_POST['txt_contact'];

?>
<table class="table table-striped" border="0">

<tr>
<td colspan="2">
    <div class="alert alert-info">
        <strong>Success</strong>, Form Submitted Successfully...
    </div>
</td>
</tr>

<tr>
<td>First Name</td>
<td><?php echo $fname ?></td>
</tr>

<tr>
<td>Last Name</td>
<td><?php echo $lname ?></td>
</tr>

<tr>
<td>Your eMail</td>
<td><?php echo $email; ?></td>
</tr>

<tr>
<td>Contact No</td>
<td><?php echo $phno; ?></td>
</tr>

</table>
<?php

} ?>

please help me out.you can see the working example here http://demos.codingcage.com/ajax-form-submit/

Answer 1

First, you need to modify the ID attributes in the form, as ID have to be unique. Then, when submit is successful, you can use the success event jQuery DOC.

All this assuming that the PHP side is fine, as you mentionned it.

HTML

<div id="response"></div>
<div id="form-content">
    <form method="post" id="reg-form" autocomplete="off">
        <div class="form-group">
            <input type="text" class="form-control" name="txt_fname" id="fname" placeholder="First Name" required />
        </div>
        <div class="form-group">
            <input type="text" class="form-control" name="txt_lname" id="lname" placeholder="Last Name" required />
        </div>
        <div class="form-group">
            <input type="text" class="form-control" name="txt_email" id="email" placeholder="Your Mail" required />
        </div>
        <div class="form-group">
            <input type="text" class="form-control" name="txt_contact" id="num" placeholder="Contact No" required />
        </div>
        <hr />
        <div class="form-group">
            <button class="btn btn-primary">Submit</button>
        </div>
    </form>
</div>

I just added a response div, in case you need to let the user know it was successful (not mandatory but user friendly). I also modified the way you handled the data (see comments in code)

jQuery (3.2.1)

<script type="text/javascript">

function clear_form() // only if you want to clear the form after success
 {  // I use the IDs from form, adapt to yours if needed
    $("#fname").val('');
    $("#lname").val('');
    $("#email").val('');
    $("#num").val('');
 }

$(document).ready( function() {

  $('#reg-form').submit(function(e){

  e.preventDefault(); // Prevent Default Submission
  var data = $("#reg-form").serialize(); // it will serialize the form data
    $.ajax({
    url: 'submit.php',
    type: 'POST',
    data: { data }, // added the { } to protect the data

    success : function(data){ // here we use the success event

    $('#response').html(data); // only if you use PHP response and want to show it

    $('#form-content').fadeOut("slow");
    clear_form(); // reset all fields
    $('#form-content').fadeIn("slow");

    },
    error: function (request, status, error) { // handles error
    alert(request.responseText); // change alert to whatever you want/need
    }
   })
    .fail(function(){
    alert('Ajax Submit Failed ...');    
    });
  });

});

</script>