Can't hook form submit event

Question

I'm trying to use jQuery to submit a form so the page doesn't need to be reloaded I cant get it to hook onto the form though.

<form action="index.php" method="get" id="frmFilter">

and

$("#frmFilter").submit( function () {
    alert('t');
    return false;
});

It just won't work though; when I use the submit button on the form it submits instead of showing an alert.

The form is actually loaded using jQuery's .load event and I have tried to put the above code on the page with the form as well as the page that loads the form and both wouldn't work.

Any idea what I'm doing wrong?

Tested using both IE8 and Chrome 3.

Answer 1

In your callback:

$("#frmFilter").submit( function (e) {
    e.preventDefault();
    alert('t');
    return false;
});

Answer 2

You mentioned that you are dumping the form onto your page with jquery's load method. This means that any kind of submit event handler fired in the "parent page's" document.ready will have already fired by the time your load finishes its job. What you need to do is find a way to attach this event after the load has finished... There are two ways I can suggest:

One, in your "parent page", attach the event after the load has completed, in a callback. For example:

$('#sometarget').load('someform.php', function() {
    // this is the load "complete" callback. attach events in here.
    $("#frmFilter").submit( function () {
        alert('t');
        return false;
    });
});

Another idea is to put this script in the "someform.php" (or whatever you're calling it!), but as part of the document, not in its head or own "document.ready". (Remember, document.ready fired long ago, so anything in this "someform" page's own "document.ready" will never see the light of day when being injected via load...)

PARENT PAGE

$('#sometarget').load('someform.php');

FORM PAGE

<form action="index.php" method="get" id="frmFilter">
    <input type="..." />
    <input type="..." />
</form>
<script type="text/javascript">
$("#frmFilter").submit( function () {
    alert('t');
    return false;
});
</script>

Good luck!