How do I show login fail message inside Bootstrap modal?

Question

I'm using Bootstrap Modal for login form. I wanna know how do I show the login fail message inside the same login form without closing it after I clicked "submit" button?

I only know I have to put inside the modal form for the error message and I have to use JS/AJax? to connect between php and the login form?

I have no idea where to start...

Answer 1

Okay, this is the deal.

1. Bind the click function of the Submit with return false;.
2. Fire an AJAX event.
3. Trigger the modal window.
4. Update the .modal-body with the contents from the AJAX.

Snippet:

$(function () {
  $(".submit").click(function (e) {
    $form = $(this).closest("form");
    // Prevent Submission.
    e.preventDefault();
    // Fire AJAX to the path!
    $.post("checkLogin.php", function (resp) {
      // If user not found...
      if (resp == "no")
        $("#error-modal").find(".modal-body").html("User not found!").end().modal("show");
      else
        $form.submit();
    });
  });
});