title: Bootstrap modal from login in php using ajax
body: <p>I'm trying to create login through php its working in a static page but not in bootstrap modal form .. </p>
  
  <p>if i am entering any data it is showing successful with alert and not verifying my data ! </p>
  
  <p>I have also implemented verification system in login mean login should be only possible after email verification but its also not working with ajax. </p>
  
  <p>pls help ! How to write ajax for this php login code?</p>
  
  <p>What i have tried is just given in code.</p>
  
  <h2><strong>login.php</strong></h2>
  
  <pre><code>&lt;?php
      $msg = "";
  
      if (isset($_POST['login_button'])) {
              $con = new mysqli('localhost', 'root', '', 'research');
  
          $email = $con-&gt;real_escape_string($_POST['email']);
          $password = $con-&gt;real_escape_string($_POST['password']);
  
          if ($email == "" || $password == "")
              $msg = "Please check your inputs!";
          else {
              $sql = $con-&gt;query("SELECT id, password, isEmailConfirmed FROM users WHERE email='$email'");
              if ($sql-&gt;num_rows &gt; 0) {
                  $data = $sql-&gt;fetch_array();
                  if (password_verify($password, $data['password'])) {
                      if ($data['isEmailConfirmed'] == 0)
                          $msg = "Please verify your email!";
                      else {
                          $msg = "You have been logged in";
  
                      }
                  } else
                      $msg = "Please check your inputs!";
              } else {
                  $msg = "Please check your inputs!";
              }
          }
      }
  ?&gt;
  </code></pre>
  
  <h2> <strong>Script included in index.php</strong></h2>
  
  <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(){
      $('#login_button').click(function(){
           var email = $('#email').val();
           var password1 = $('#password1').val();
           if(email!= '' &amp;&amp; password1!= '')
           {
                $.ajax({
                     url:"login.php",
                     type:"POST",
                     data: {email:email, password1:password1},
                     success:function(data)
                     {
                          //alert(data);
                          if(data == 'Please check your inputs!')
                          {
                               alert("Wrong Data");
                          }
                          else
                          {
                               $('#elegantModalForm').hide();
                               location.reload();
                               alert("Successful");
                          }
                     }
                });
           }
           else
           {
                alert("Both Fields are required");
           }
      });
    /*  $('#logout').click(function(){
           var action = "logout";
           $.ajax({
                url:"action.php",
                method:"POST",
                data:{action:action},
                success:function()
                {
                     location.reload();
                }
           });
      });*/
  });
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <h2><strong>Modal form bootstrap code written in index.php</strong></h2>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;!-- Modal --&gt;
  &lt;div class="modal fade" id="elegantModalForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
    aria-hidden="true"&gt;
  
  
    &lt;div class="modal-dialog" role="document"&gt;
      &lt;!--Content--&gt;
      &lt;div class="modal-content form-elegant"&gt;
        &lt;!--Header--&gt;
        &lt;div class="modal-header text-center"&gt;
  
          &lt;h3 class="modal-title w-100 dark-grey-text font-weight-bold my-3" id="myModalLabel"&gt;&lt;strong&gt;Sign in&lt;/strong&gt;&lt;/h3&gt;
          &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;
            &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
          &lt;/button&gt;
        &lt;/div&gt;
        &lt;!--Body--&gt;
        &lt;div class="modal-body mx-4"&gt;
          &lt;!--Body--&gt;
          &lt;div class="md-form mb-5"&gt;
            &lt;input type="email" name="email" id="email" class="form-control validate"&gt;
            &lt;label data-error="wrong" data-success="right" for="Form-email1"&gt;Your email&lt;/label&gt;
          &lt;/div&gt;
  
          &lt;div class="md-form pb-1"&gt;
            &lt;input type="password" id="password1" name="password1" class="form-control validate"&gt;
            &lt;label data-error="wrong" data-success="right" for="Form-pass1"&gt;Your password&lt;/label&gt;
            &lt;p class="font-small blue-text d-flex justify-content-end"&gt;Forgot &lt;a href="#" class="blue-text ml-1"&gt;
                Password?&lt;/a&gt;&lt;/p&gt;
          &lt;/div&gt;
  
          &lt;div class="text-center mb-3"&gt;
            &lt;button type="button" class="btn btn-primary display-4" name="login_button" id="login_button"&gt;Sign in&lt;/button&gt;
          &lt;/div&gt;
          &lt;p class="font-small dark-grey-text text-right d-flex justify-content-center mb-3 pt-2"&gt; or Sign in
            with:&lt;/p&gt;
  
          &lt;div class="row my-3 d-flex justify-content-center"&gt;
            &lt;!--Facebook--&gt;
            &lt;button type="button" class="btn btn btn-white btn-rounded mr-md-3 z-depth-1a"&gt;&lt;i class="fab fa-facebook-f text-center"&gt;&lt;/i&gt;&lt;/button&gt;
            &lt;!--Twitter--&gt;
            &lt;button type="button" class="btn btn-white btn-rounded mr-md-3 z-depth-1a"&gt;&lt;i class="fab fa-twitter"&gt;&lt;/i&gt;&lt;/button&gt;
            &lt;!--Google +--&gt;
            &lt;button type="button" class="btn btn-white btn-rounded z-depth-1a"&gt;&lt;i class="fab fa-google-plus-g"&gt;&lt;/i&gt;&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;!--Footer--&gt;
        &lt;div class="modal-footer mx-5 pt-3 mb-1"&gt;
          &lt;p class="font-small grey-text d-flex justify-content-end"&gt;Not a member? &lt;a href="#" class="blue-text ml-1"&gt;
              Sign Up&lt;/a&gt;&lt;/p&gt;
        &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- Modal --&gt;</code></pre>
  </div>
  </div>
  </p>