Checking and submitting form via Ajax in boostrap modal

Question

I have a login form in boostrap's modal window

<form method="post" id="loginForm" action="index.php">
  <label for="email">Email:</label>
  <input class="form-control" type="text" name="email" value="" id="emailLogin"/><br/>

  <label for="password">Password:</label>
  <input class="form-control" type="password" name="password" value="" id="passwordLogin"/><br/>
  <div id="loginAlert" class="alert alert-danger" role="alert">Email or password incorrect</div> <!-- Hidden by default -->

  <button type="submit" name="login" class="btn btn-primary" id="loginButton">Login</button>
  <script src="checkLoginForm.js"></script></form>

I would like to check this form (if email and password are correct) before submitting it. If the function, which checks the email and password returns 1, there is something incorrect. Form should not submit in this case and it should just make the alert visible. If everything is correct, it should submit.

Thing is: I can prevent the form from submitting, if the the email and password are incorrect, but I can't submit it, if they are correct. Here is the code from checkLoginForm.js

$(document).ready(function() {
    $("#loginForm").submit(function(event) {
        event.preventDefault();
        $.ajax({
            type: 'POST',
            url: 'include/ajax.php?action=checkLogin',
            data: {
                email: $("#emailLogin").val(),
                password: $("#passwordLogin").val(),
            },
            success: function(result) {
                console.log(result);
                if(result == 0) {

                } else {
                    $("#loginAlert").css({"display": "block"});
                }
            }
        });
    });
});

I have no idea what to do, when the result == 0. If I do $("loginForm").submit();, that does not submit the form (else part does work).

Thank you for your replies.

Answer 1

I would advice you to use a simple $.post, it's a shorthand way of using $.ajax for POST requests. Just check if the values provided are correct in your php file, if they are correct process that data and return true or redirect the user to another page else return false.

 $(document).ready(function() {
    $("#loginButton").on('click', function (e){
        e.preventDefault();
        var email = $("#emailLogin").val();
        var passwd = $("#passwordLogin").val();
        $.post('include/ajax.php?action=checkLogin', {email: email, password: passwd}, function (data) {
            var res = $.parseJSON(data);
            if (res.result == true) {
                //you can redirect the or display a message to the user.
                //redirect the user to another page
                //$("#loginAlert").css({"display": "block"}).html("login successful");
            }else {
                $("#loginAlert").css({"display": "block"});
            }
        });
    });
  });

Then in your php file

if (isset($_GET['action']) && $_GET['action'] == 'checkLogin') {
    $passwd = trim(filter_input(INPUT_POST, 'password', FILTER_SANITIZE_STRING));
    $email = trim(filter_input(INPUT_POST, 'email', FILTER_VALIDATE_EMAIL));
    //validate inputs here
    //get data from db
    //then compare values
    //if values match return true
    //$db_mail and $db_passwd are from the db.
    if ($email == $db_mail && $passwd == $db_passwd) {
        //if the provided information is correct
        //process it here, login the user.
        //redirect if necessary.
        // or return results to JS 
        echo json_encode(['result' => true]);
    } else {
        //if the information is wrong return false to JS
        //and alert the user
        echo json_encode(['result' => false]);
    }
}