event.preventDefault() not working in Mozilla or IE

Question

I'm finally at the point of testing my site in other browsers (built it mostly in Chrome). Unfortunately, a lot of stuff seems to function differently. I'll begin with the very first problem: upon login, I have a JS/jQuery check to make sure the username and password match, and upon failure it should stop the submission.

However, while it works in Chrome and Safari, in Mozilla and IE the submission is still going through (hitting an apology page, but still something I'd rather just not see at all).

I've tried subbing out event.preventDefault() for e.preventDefault() or evt.preventDefault() but none of them work, the form still submits (and for the second two it makes it so that it submits in Chrome as well). Here is my code, would love any thoughts:

function checkLogin()
{
    // get the variables, execute some other checks (eg, things not blank)

    // run ajax code to determine if pieces match
    $.ajax({
    type: "POST",
    url: "check_login.php", 
    data: {'username': username, 'password': password},
    async: false,
    success: function(result) 
    {
      if (result == 1)
      {
        $('#loginoff').html("Invalid username/password");
        e.preventDefault();
        return false;
      } 
      else
      {
        $('#loginoff').html("");
        return true;
      } 
    }
    });
}

Please note that the function is definitely going through and returning 1 when the username and password don't match as, in all cases, the 'Invalid username/password' message is coming up.

Also, in case anybody is interested in the HTML:

<form action="login.php" method="post" onsubmit="return checkLogin()">
<!-- code for inputs, eg username -->
<input type="submit" class="btn" value="Log In"/>
</form>

Answer 1

I'd suggest preventing the event to begin with, then when you want the form to submit, do it with the native submit method since it bypasses jQuery.

var form = document.getElementById("formid");
$(form).submit(function(e){
    e.preventDefault();

    $.ajax({
        type: "POST",
        url: "check_login.php",
        data: {
            'username': username,
            'password': password
        },
        //async: false,
        success: function (result) {
            if (result == 1) {
                $('#loginoff').html("Invalid username/password");
            } else {
                $('#loginoff').html("");
                form.submit(); // note, form is a form NODE, not a jQuery object containing a form.
            }
        }
    });

});

this also allows you to remove async: false which is ALWAYS a good thing(other than within webworkers.)

Answer 2

Set the console to persist the console.log. You should see a JavaScript error

e.preventDefault();  //<--trying to prevent the form from submitting

Where is e defined?

function checkLogin()  <-- No e defined

You will have an error which means the form will submit since nothing prevented it from stopping.

function checkLogin(e) {
    e = e || window.event;

and since it is not a jQuery wrapped event object, you need to do it like

$.Event(e).preventDefault();

Answer 3

In addition to the ajax issues mentioned by others, IE8 doesn't do preventDefault().

PreventDefault alternative for IE8

(event.preventDefault) ? event.preventDefault() : event.returnValue = false; 

Answer 4

Unfortunately I was unable to do as I had hoped in the title as I could never successfully prevent the submit in all four browsers (Mozilla was a persistent holdout).

What I ended up doing, then, was the following:

1.) In my HTML, I changed the boundaries of the so that it only contained the inputs, but the 'Submit' button was OUTSIDE of

2.) Then, instead of have like I had, I moved "return checkLogin()" down to the submit button (now outside of the form) and changed it to 'onclick'.

3.) This way, I didn't need any preventDefault() as there was no default to occur. I simply went to the ajax request, and in the 'return true' case, set it to do $('#mainform').submit();

Note: By doing this, I was also able to make the ajax request no longer asynchronous, which everyone says is good (I'm still new so not as sure of its importance).

Hopefully this helps anybody who comes across the same issue.

Answer 5

I eventually figured out how to make it work in general:

in the section, the function should be written as:

Note the 'event' as an input for checkLogin

Then the function I used is below. Key changes are a.) preventing the default submission at the start (note, $.Event(e) is necessary or else it won't work in IE), b.) defining the form using getElementById, c.) submitting the function using form.submit(). Hopefully people find this helpful.

function checkLogin(e)
{
var form = document.getElementById("mainloginform");
$.Event(e).preventDefault();

// set error counter
var counter = 0;
var username = $('#loginusername').val();
var password = $('#loginpassword').val();

// check that username is not blank
 if (username==null || username=="")
{
    $('#usernameoff').html("Must enter your username");
    counter++;
}
else
{
    $('#usernameoff').html("");
}

// check that password is not blank
 if (password==null || password=="")
{
    $('#passwordoff').html("Must enter your password");
    counter++;
}
else
{
    $('#passwordoff').html("");
}

// if counter zero at this point, return false, else return true
if (counter > 0)
{
    return false;
}
else
{
    $.post("check_login.php", {'username': username, 'password': password}, function(result)
    {
        if(result == 1)
        {
            $('#loginoff').html("Invalid username/password");
            return false;
        }
        else
        {
            $('#loginoff').html("");
            form.submit();
            return true;
        }
    });
}
}