Form still submits even with preventDefault

Question

I don't know what is wrong here. preventDefault should stop the form from submitting but it still proceeds to. I have an ajax call where it verifies if user is valid. If not, prevent from submitting. Else, proceed to login and home page.

Form

<form id="signIn" method="post" action="processForms.php">
    <table cellspacing="10">
        <tr id="errorSignIn" hidden="hidden">
            <td class="centerItem errorMessage" colspan="3">
                Incorrect Username and/or Password
            </td>
        </tr>
        <tr>
            <td><input type="text" id="username" name="username" autocomplete="off" autofocus required placeholder="Username..."></td>
            <td><input type="password" id="password" name="password" autocomplete="off" required placeholder="Password..."></td>
            <td><input type="submit" name="processButton" class="signIn" value="Sign-in" ></td>
        </tr>
    </table>
</form>

Javascript

$('#signIn').submit ( function (e) {
    var username = $('#username').val();
    var password = $('#password').val();
    var dataString = "username=" + username + "&password=" + password;
    $.ajax( {
       type: "POST",
        url: "ajaxCheck.php",
        data: dataString,
        cache: false,
        success: function (result) {
            if (!result) {
                $('#errorSignIn').removeAttr('hidden');
                e.preventDefault();
                return false;
            }
        }
    });
});

ajaxCheck.php

<?php
$username = $_POST['username'];
$password = $_POST['password'];
$password = md5($password);
$dbConnection = mysqli_connect('localhost','root','','onboard');
$query =  "SELECT * FROM account WHERE username='$username' AND password='$password'";
$result = mysqli_query($dbConnection,$query);
$count = mysqli_num_rows($result);
if ($count == 1) { echo true; }
else { echo false; }

You only return false at the inner function, but the outer function returns nothing, so the submit will be fired. — Tyr, Sep 24 '14 at 01:43
@Tyr I tried adding "return false;" to the other function and added an else clause to the inner function to return true, but now it won't submit the form when the user exists. — John Ryan Camatog, Sep 24 '14 at 02:02
Your present code is open to [**SQL injection**](http://stackoverflow.com/q/60174/). Use [**CRYPT_BLOWFISH**](http://security.stackexchange.com/q/36471) or PHP 5.5's [`password_hash()`](http://www.php.net/manual/en/function.password-hash.php) function. For PHP < 5.5 use the [`password_hash() compatibility pack`](https://github.com/ircmaxell/password_compat). Plus, [**use prepared statements**](http://www.php.net/manual/en/mysqli.quickstart.prepared-statements.php), or [**PDO with prepared statements**](http://php.net/pdo.prepared-statements). — Funk Forty Niner, Sep 24 '14 at 02:13

andrex · Accepted Answer · 2014-09-24T02:07:52.443

Because you are putting the prevent default inside the ajax success function which is an asynchronous. So that's why it's still submitting. You have to prevent it before calling the ajax and not after the ajax have finished.

$('#signIn').submit ( function (e) {
         e.preventDefault(); // put preventDefault here not inside the ajax success function
        var username = $('#username').val();
        var password = $('#password').val();
        var dataString = "username=" + username + "&password=" + password;
        $.ajax( {
           type: "POST",
            url: "ajaxCheck.php",
            data: dataString,
            cache: false,
            success: function (result) {
                if (!result) {
                    $('#errorSignIn').removeAttr('hidden');

                    return false;
                }
            }
        });
    });

To answer your follow question here is something you can do.

var isFormChecked = false; // this variable will deremine if the ajax have finished what you wanted to do
$('#signIn').submit ( function (e) {

 // if ajax set this to true, it will not go here when it triggers.
 if(!isFormChecked){ 
    e.preventDefault(); // put preventDefault here not inside the ajax success function
    var username = $('#username').val();
    var password = $('#password').val();
    var dataString = "username=" + username + "&password=" + password;
    $.ajax( {
       type: "POST",
        url: "ajaxCheck.php",
        data: dataString,
        cache: false,
        success: function (result) {
           // if result is set to true
           isFormChecked = result;
           // then trigger the submit of the form
           $('#signIn').trigger('submit');

        }
    });
} else {
    // form is submitted
    isFormChecked = true;
}
});

How will I able to continue submitting the form when the ajax result is set to true? I tried unbinding then submit, but it's not submitting. — John Ryan Camatog, Sep 24 '14 at 02:00
Got confused when I caused an infinite loop, I noticed I put the var isFormChecked in the function. Thanks for the answer. :) — John Ryan Camatog, Sep 24 '14 at 02:28

score 0 · Answer 2 · answered Sep 24 '14 at 01:49

What you can do is change the button type from submit to button in your html.

And then on click you validate , after that with the help of jquery you submit your form.

Here is how it will do your job:

<form id="signIn" method="post" action="processForms.php"  >
    <table cellspacing="10">
        <tr id="errorSignIn" hidden="hidden">
            <td class="centerItem errorMessage" colspan="3">
                Incorrect Username and/or Password
            </td>
        </tr>
        <tr>
            <td><input type="text" id="username" name="username" autocomplete="off" autofocus required placeholder="Username..."></td>
            <td><input type="password" id="password" name="password" autocomplete="off" required placeholder="Password..."></td>
            <td><input type="button" name="processButton" class="signIn" value="Sign-in" ></td>
        </tr>
    </table>
</form>



$('#processButton').click ( function (e) {
    var username = $('#username').val();
    var password = $('#password').val();
    var dataString = "username=" + username + "&password=" + password;
    $.ajax( {
       type: "POST",
        url: "ajaxCheck.php",
        data: dataString,
        cache: false,
        success: function (result) {
            if (!result) {
                $('#errorSignIn').removeAttr('hidden');
                return false;
            }
            else { $("#signIn").submit(); }
        }
    });
});

Form still submits even with preventDefault

2 Answers2