I'm working on an AJAX login system. Right now, when the user clicks on a link, the login form is dynamically loaded when the person clicks on a "log in" link. Since I'm using AJAX for this, I want to prevent the form from actually submitting when the submit button is clicked. I tried the following code as part of my load function, and the form loads correctely, but the form still submits normally.

$('#loginBox').load('loginform.php');
$('#loginBox form').submit(function(event) {
 event.preventDefault();
});

How can I fix this?

I'm working on an AJAX login system. Right now, when the user clicks on a link, the login form is dynamically loaded when the person clicks on a "log in" link. Since I'm using AJAX for this, I want to prevent the form from actually submitting when the submit button is clicked. I tried the following code as part of my load function, and the form loads correctely, but the form still submits normally.

$('#loginBox').load('loginform.php');
$('#loginBox form').submit(function(event) {
 event.preventDefault();
});

How can I fix this?

• javascript
• jquery

3 Answers 3

jQuery.load is an asynchronous function.

This means that the form may not be available (yet) when you try to match "#loginBox form". To make sure your code is executed after the form is loaded, you must pass your code as a callback function to load.

$('#loginBox').load("form.html", function() {
    $('#loginBox form').submit(function(event) {
        event.preventDefault();
    });
});

Btw - In your case it does not matter wether you use event.preventDefault() or return false. They will both prevent your form from being submitted. (See event.preventDefault() vs. return false)

Add return false to prevent the default behavior:

$('#loginBox form').submit(function(event) {
   return false;
});

    $('#loginBox form').submit(function(event) {
return false;
});