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 v

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

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 3

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 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;
        }
    });
}
}