title: display success message after form submit ajax
body: <p>I have a simple html form with modal and I am saving data with ajax method. Now, I want to display a success message for a few seconds. I tried many ways from stackoverflow, but did not work. Please someone help me.Here is my form and ajax code.
  HTML:
  </p>
  
  <pre><code>      &lt;button data-toggle="modal" data-target="#add" class="btn btn-primary btn-sm"&gt;
                  &lt;span class="glyphicon glyphicon-plus"&gt;&lt;/span&gt;New
                  &lt;/button&gt;
          &lt;div id="add" class="modal fade" role="dialog"&gt;
          &lt;div class="modal-dialog modal-lg"&gt;
              &lt;form id="save" method="post" enctype="" name="myForm"&gt;
                  &lt;div class="modal-content"&gt;
                      &lt;div class="modal-header"&gt;
                          &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
                          &lt;strong&gt;Add+&lt;/strong&gt;
                      &lt;/div&gt;
                      &lt;div class="modal-body"&gt;
                          &lt;table class="table table-bordered"&gt;
                          &lt;tr&gt;
                              &lt;td&gt;
                                  &lt;label&gt;Student ID:&lt;/label&gt;
                                  &lt;select name="student_id" id="student_id" onChange="names('student_id')" onkeyup="names('student_id')"&gt;
                                      &lt;option value=""&gt;select id&lt;/option&gt;                                                     
                                          &lt;?php 
                                          include 'connect.php';
                                          $sqlst="Select * from student_info";
                                                $queryst=mysqli_query($connect,$sqlst);
                                                while($rowst=mysqli_fetch_array($queryst)){
                                          ?&gt;
                                          &lt;option value="&lt;?php echo $rowst[1]?&gt;"&gt;&lt;?php echo $rowst[1]?&gt;
                                          &lt;/option&gt;
                                          &lt;?php } ?&gt;
                                  &lt;/select&gt;
                                  &lt;/td&gt;                               
                                  &lt;td&gt;
                                      &lt;label&gt;Date:&lt;/label&gt;
                                      &lt;input type="text" name="att_date" id="att_date" class="selector" onChange="names('att_date')" onkeyup="names('att_date')"/&gt;
                                  &lt;/td&gt;
                              &lt;/tr&gt;
                              &lt;tr&gt;
                                  &lt;td id="student_id_error" style="color:#FF0000"&gt;&lt;/td&gt;
                                  &lt;td id="att_date_error" style="color:#FF0000"&gt;&lt;/td&gt;
                              &lt;/tr&gt;
                              &lt;tr&gt;
                                  &lt;td&gt;
                                      &lt;label&gt;Sign In Time:&lt;/label&gt;&lt;input type="text" name="sign_in" id="sign_in" onChange="names('sign_in')" onkeyup="names('sign_in')"/&gt;
                                  &lt;/td&gt;
                                  &lt;td&gt;
                                      &lt;label&gt;Sign Out Time:&lt;/label&gt;
                                      &lt;input type="text" name="sign_out" id="sign_out" onChange="names('sign_out')" onkeyup="names('sign_out')" disabled/&gt;
                                  &lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/table&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-footer"&gt;
                      &lt;input type="submit" name="save" value="Submit" class="btn btn-primary" /&gt;
                      &lt;button type="button" data-dismiss="modal" class="btn btn-danger"&gt;
                          Close
                      &lt;/button&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
  &lt;div id="info" style="display: none;"&gt;
   Data Successfully inserted!
  &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  
  
  <p>JS:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script&gt;
  $(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(){
                  
    $("#info").show();
    $("#info").delay(5000).fadeOut(); // Will hide after 5 seconds
              //window.location.assign('student_att_index.php')
              }
          })
      };
   });
   
   });
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>