title: How to show Bootstrap Alert on Button Click via Javascript / jQuery?
body: <p>I have a registration form page created on asp.net.</p>
  
  <p>When the user click <strong>Submit</strong> button i want to show a Bootstrap alert message at the top of the page for 5 sec that say <strong>"Registered Successfully""</strong>.</p>
  
  <p>If the user click <strong>Submit</strong> and the user has not fill the required fields it should not show the alert message until he fill all the fields and submit.</p>
  
  <p>I've tried the following code but nothing happen after filling all the fields and submit.</p>
  
  <pre><code>&lt;html xmlns='http://www.w3.org/1999/xhtml'&gt;
  &lt;head runat="server"&gt;
   &lt;link href="Styles/styles.css" rel="stylesheet" type="text/css" /&gt;
      &lt;link href="Styles/bootstrap.min.css" rel="stylesheet" type="text/css" /&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;!-- Latest compiled and minified CSS --&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"&gt;
  
      &lt;!-- jQuery library --&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"&gt;&lt;/script&gt;
  
      &lt;!-- Popper JS --&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"&gt;&lt;/script&gt;
  
      &lt;!-- Latest compiled JavaScript --&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
              &lt;div class="container"&gt;
  
              &lt;div id="messages" class="hide" role="alert"&gt;
                &lt;button type="button" class="close" data-dismiss="alert" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
                &lt;div id="messages_content"&gt;&lt;/div&gt;
              &lt;/div&gt;
  
      &lt;form id="form1" runat="server"&gt;
          &lt;asp:ScriptManager runat="server"&gt;&lt;/asp:ScriptManager&gt;
          &lt;div class="form"&gt;
              &lt;label for="FN"&gt;
                  &lt;br /&gt;
                  &lt;br /&gt;
                  First Name:&lt;/label&gt;
              &lt;input type="text" id="txtFirstname" runat="server" /&gt;
              &lt;br /&gt;
              &lt;br /&gt;
              &lt;label for="LN"&gt;Last Name:&lt;/label&gt;
              &lt;input type="text" id="txtLastname" runat="server" /&gt;
              &lt;br /&gt;
              &lt;br /&gt;
              Password&lt;span style="color: red"&gt;*&lt;/span&gt;:
              &lt;asp:TextBox ID="txtPassword" TextMode="Password" runat="server"&gt;&lt;/asp:TextBox&gt;
              &lt;label for="BT"&gt;
                  &lt;asp:RequiredFieldValidator ID="Pw" runat="server" ControlToValidate="txtPassword" ErrorMessage="Please Provide a password !"&gt;Required&lt;/asp:RequiredFieldValidator&gt;
              &lt;/label&gt;
              &lt;br /&gt;
              &lt;br /&gt;
              E-mail&lt;span style="color: red"&gt;*&lt;/span&gt;:
              &lt;asp:TextBox ID="txtEmail" TextMode="Email" runat="server"&gt;&lt;/asp:TextBox&gt;
              &lt;asp:RequiredFieldValidator ID="EM" runat="server" ControlToValidate="txtEmail" ErrorMessage="Please Provide an Email"&gt;Required&lt;/asp:RequiredFieldValidator&gt;
              &lt;br /&gt;
              &lt;br /&gt;
              &lt;asp:Literal ID="ltrTable" runat="server"&gt;&lt;/asp:Literal&gt;
              &lt;label for="BT"&gt;Blood Type:&lt;/label&gt;
              &lt;telerik:RadComboBox runat="server" Skin="Telerik"&gt;
                  &lt;Items&gt;
                      &lt;telerik:RadComboBoxItem Value="1" Text="A+" /&gt;
                      &lt;telerik:RadComboBoxItem Value="2" Text="A-" /&gt;
                      &lt;telerik:RadComboBoxItem Value="3" Text="B+" /&gt;
                      &lt;telerik:RadComboBoxItem Value="4" Text="O" /&gt;
                      &lt;telerik:RadComboBoxItem Value="5" Text="O+" /&gt;
                  &lt;/Items&gt;
              &lt;/telerik:RadComboBox&gt;
   &lt;button class="btn btn-default"  id="btnSubmit" onclick="insertData()"&gt;Submit&lt;/button&gt;
  &lt;asp:Button ID="btnCancel" runat="server" CausesValidation="False" OnClick="Button1_Click" Text="Cancel" /&gt;
      &lt;/form&gt;
                  &lt;/div&gt;
  
          &lt;script type="text/javascript"&gt;
              $('#form').submit(function(e) {
                  $('#messages').removeClass('hide').addClass('alert alert-success alert-dismissible').slideDown().show();
                  $('#messages_content').html('&lt;h4&gt;registration successful message &lt;/h4&gt;');
                  $('#modal').modal('show');
                  e.preventDefault();
              });
          &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  
  &lt;script type="text/javascript"&gt;
  
      $(document).ready(function () {
  
          //insertData();
          fill_table();
  
      })
      function insertData() {
          var firstname = document.getElementById("txtFirstname").value;
          var lastname = document.getElementById("txtLastname").value;
          var password = document.getElementById("txtPassword").value;
          var email = document.getElementById("txtEmail").value;
  
          if (firstname == "") {
              alert("fails");
          } else {
              $.ajax({
                  type: "POST",
                  contentType: "application/json;charset=utf-8",
                  url: "Home.aspx/test",
                  data: "{firstname: '" + firstname + "',lastname: '" + lastname + "', email: '" + email + "' , password: '" + password + "'}",
                  dataType: "json",
                  async: false,
                  success: function (resdata) {
                  }
              });
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>What i'm doing wrong?</p>
  
  <p>Thank you!</p>