title: Bootstrap Modal Login with AJAX
body: <p>I'm working on a website where I have implemented Bootstrap's modal component as a login form.</p>
  
  <p>I have my login script working correctly (tested without the modal), however, it obviously is not able to display errors as the modal closes before any errors are displayed. My best bet to get the errors displaying is to use <code>AJAX</code>. I've attempted implementing <code>AJAX</code> into it, but seem to be failing miserably (it's not something I'm familiar with). </p>
  
  <p>Here's the code I've tried so far:</p>
  
  <p><strong>index.php</strong></p>
  
  <pre><code>    &lt;script type="text/javascript"&gt;
  
  function login(username, password, callback) {
      var xhr = new XMLHttpRequest();
  
      xhr.open("POST", "login.php", true);
      xhr.responseType = "json";
      xhr.onload = function() {
          var data = xhr.response;
  
          if (data["status"] === "failure") {
              callback({
                  "errorCode": data["errorCode"],
                  "errorMessage": data["errorMessage"]
              });
          } else {
              callback(null, data["redirect"]);
              $("#error").append(errorMessage);
          }
      };
      xhr.send(JSON.stringify({
          "username": username,
          "password": password
      });
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>--- // ---</p>
  
  <pre><code>    &lt;div id="loginModal" class="modal fade" role="dialog"&gt;
    &lt;div class="modal-dialog modal-sm"&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;/div&gt;
        &lt;div class="modal-body"&gt;
                          &lt;div class="loginForm"&gt;
                          &lt;div id="error"&gt;&lt;/div&gt;
                      &lt;form id="login" action="index.php" method="post"&gt;
                          &lt;div class="input-container"&gt;
                              &lt;label for="username"&gt;Email or Username&lt;/label&gt;
                              &lt;input type="text" name="username" required class="form-control"/&gt;
                          &lt;/div&gt;
                          &lt;div class="input-container"&gt;
                              &lt;label for="password"&gt;Password&lt;/label&gt;
                              &lt;input type="password" name="password" required class="form-control"/&gt;
                          &lt;/div&gt;
                          &lt;div class="input-container"&gt;
                              &lt;input type="checkbox" name="remember" value="true" id="remember" /&gt;
                              &lt;label for="remember"&gt;Remember me&lt;/label&gt;
                          &lt;/div&gt;
                          &lt;div class="submit-container"&gt;
                              &lt;button type="submit" class="btn btn-primary btn-login"&gt;SIGN IN&lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/form&gt;
                  &lt;/div&gt;  
          &lt;h2&gt;&lt;span&gt;or&lt;/span&gt;&lt;/h2&gt;    
          &lt;div class="social-signin"&gt;
              &lt;a href="#" class="facebook"&gt;Sign in with Facebook&lt;/a&gt;
              &lt;a href="#" class="google"&gt;Sign in with Google+&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="modal-footer"&gt;
          &lt;p&gt;Need an account? &lt;a href="sign-up"&gt;Sign up here.&lt;/a&gt;&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>login.php</strong></p>
  
  <p>--- // ---</p>
  
  <pre><code> login_complete($user_id);
  
      $output = [];
  
      $output["status"] = "success";
  
      echo json_encode($output);
      exit;
  } else {
      echo json_encode(array("status" =&gt; "failure", "errorCode": $result[0], "errorMessage": $ERRORMSGS[$result[0]]));
  }
  </code></pre>
  
  <p>My question is, how can I properly implement <code>AJAX</code> into my Bootstrap modal login form, to successfully display error messages (such as "Incorrect username and/or password")? At the moment, no error is displayed and the user isn't authenticated (it just goes back to index.php).</p>
  
  <p>Any help is greatly appreciated.</p>