表單提交ajax後顯示成功消息

Question

我有一個簡單的html表單與模式，我用ajax方法保存數據。現在，我想顯示幾秒鐘的成功消息。我嘗試了很多方法從stackoverflow，但沒有奏效。請有人幫助我。這裏是我的表單和ajax代碼。 HTML：

 <button data-toggle="modal" data-target="#add" class="btn btn-primary btn-sm"> 
       <span class="glyphicon glyphicon-plus"></span>New 
       </button> 
     <div id="add" class="modal fade" role="dialog"> 
     <div class="modal-dialog modal-lg"> 
      <form id="save" method="post" enctype="" name="myForm"> 
       <div class="modal-content"> 
        <div class="modal-header"> 
         <button type="button" class="close" data-dismiss="modal">&times;</button> 
         <strong>Add+</strong> 
        </div> 
        <div class="modal-body"> 
         <table class="table table-bordered"> 
         <tr> 
          <td> 
           <label>Student ID:</label> 
           <select name="student_id" id="student_id" onChange="names('student_id')" onkeyup="names('student_id')"> 
            <option value="">select id</option>              
             <?php 
             include 'connect.php'; 
             $sqlst="Select * from student_info"; 
               $queryst=mysqli_query($connect,$sqlst); 
               while($rowst=mysqli_fetch_array($queryst)){ 
             ?> 
             <option value="<?php echo $rowst[1]?>"><?php echo $rowst[1]?> 
             </option> 
             <?php } ?> 
           </select> 
           </td>        
           <td> 
            <label>Date:</label> 
            <input type="text" name="att_date" id="att_date" class="selector" onChange="names('att_date')" onkeyup="names('att_date')"/> 
           </td> 
          </tr> 
          <tr> 
           <td id="student_id_error" style="color:#FF0000"></td> 
           <td id="att_date_error" style="color:#FF0000"></td> 
          </tr> 
          <tr> 
           <td> 
            <label>Sign In Time:</label><input type="text" name="sign_in" id="sign_in" onChange="names('sign_in')" onkeyup="names('sign_in')"/> 
           </td> 
           <td> 
            <label>Sign Out Time:</label> 
            <input type="text" name="sign_out" id="sign_out" onChange="names('sign_out')" onkeyup="names('sign_out')" disabled/> 
           </td> 
          </tr> 
         </table> 
        </div> 
       </div> 
       <div class="modal-footer"> 
        <input type="submit" name="save" value="Submit" class="btn btn-primary" /> 
        <button type="button" data-dismiss="modal" class="btn btn-danger"> 
         Close 
        </button> 
       </div> 
      </form> 
<div id="info" style="display: none;"> 
Data Successfully inserted! 
</div> 
     </div> 
    </div> 

JS：

<script> 
 
$(document).ready(function(){ 
 
var base_url="http://localhost/school/"; 
 
$('#save').submit(function(e){ 
 
    e.preventDefault(); 
 
    var student_id=$('#student_id').val(); 
 
    var att_date=$.trim($('#att_date').val()); 
 
    var sign_in=$.trim($('#sign_in').val()); 
 
    var note=$.trim($('#note').val()); 
 
    if(student_id===''||att_date===''||sign_in===''){ 
 
     if(student_id==''){ 
 
      $('#student_id_error').html('Please enter Student ID'); 
 
      $('#student_id').css("border-color","red"); 
 
     } 
 
     if(att_date==''){ 
 
      $('#att_date_error').html('Please enter attendance date'); 
 
      $('#att_date').css("border-color","red"); 
 
     } 
 
     if(sign_in==''){ 
 
      $('#sign_in_error').html('Please enter signIn time'); 
 
      $('#sign_in').css("border-color","red"); 
 
     } 
 
    }else{ 
 
     $.ajax({ 
 
      url:base_url+'student_att_insert.php', 
 
      method:'post', 
 
      data:new FormData(this), 
 
      processData: false, 
 
      contentType: false, 
 
      success: function(){ 
 
       
 
\t \t $("#info").show(); 
 
\t \t $("#info").delay(5000).fadeOut(); // Will hide after 5 seconds 
 
      //window.location.assign('student_att_index.php') 
 
      } 
 
     }) 
 
    }; 
 
}); 
 
    
 
}); 
 
</script>

Answer 1

成功時顯示在你的HTML味精。 5秒後，它會載入 'student_att_index.php'

success: function() { 
      //display success message for a few seconds 
      setTimeout(function() { 
       window.location.assign('student_att_index.php') 
      }, 5000); 
     } 

Answer 2

您可以在HTML與ID添加一個div像：

<div id="info" style="display: none;"> 
Your text 
</div> 

而在你的JS代碼添加：

$("#info").show(); 
$("#info").delay(5000).fadeOut(); // Will hide after 5 seconds