How do you stop a dynamically loaded form from submitting with jquery?

Question

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?

Answer 1

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)

Answer 2

Add return false to prevent the default behavior:

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