CODEWITHSUNDEEP
javascriptjquery
Zak
Zak

Reputation: 2698

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

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?

Upvotes: 4

Views: 1870

Answers (3)

codecraft
codecraft

Reputation: 1203

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)

Upvotes: 5

Vivek Goel
Vivek Goel

Reputation: 24160

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

Upvotes: 1

amurra
amurra

Reputation: 15411

Add return false to prevent the default behavior:

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

Upvotes: 3

Related Questions