在沒有頁面刷新的情況下顯示成功消息後再次顯示Form div使用PHP AJAX

Question

我是PHP和ajax的新手。我想提交沒有頁面刷新的表單。我成功地取得了成功。提交後的表單顯示成功消息。但是我想在成功消息之後。結果淡出並再次顯示空的表單域。以便我可以再次提交一份表格。

<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 

}？>

請幫我out.you可以看到工作示例這裏 http://demos.codingcage.com/ajax-form-submit/

Answer 1

首先，您需要修改ID中的ID屬性必須是唯一的。然後，提交成功後，您可以使用success事件jQuery DOC。

所有這些都假設PHP方面很好，就像你提到的那樣。

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> 

我只是增加了一個響應格，如果你需要讓用戶知道它是成功的（不是強制的，但用戶友好的）。我還修改你處理的數據（見代碼中的註釋）

的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>