使用PHP AJAX显示成功消息而不显示页面刷新后，再次显示Form div

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>