form submit handler doesnt trigger within a jquery UI popup dialog
I have the following form displaying in a popup dialog:
<form method="post" id="forgot_password_form" action="/forgot">
<div>
Please enter your email address and we'll send you a link to reset your password.
</div>
<p></p>
<div>
<input type="text" value="" size="40" name="email" id="email">
<input type="submit" value="Submit" name="commit" id="submit">
</div>
</form>
and if I remove the submit button in my js code and set up the dialog widget's buttons to do the submit, that works.
But if I keep the 'native' submit button and bind to the form as follows:
$("#forgot_password_form").submit(function() {
alert('got here');
$.ajax({
type: $(this).attr('method'),
url: $(this).attr('action'),
data: $(this).serialize(),
dataType: 'script',
success: function(data) {
dlog.dialog('close');
window.location.href = data // data holds path to redirect to
return false;
},
error: function(xhr, status) {
$(this).append('<div class="'+status+'" style="color:red; margin-top:10px;">'+xhr.responseText+'</div>');
return false;
}
});
return false;
});
...the submit never is handled by my jquery code (I never see the alert that I inserted near the top).
I've also tried binding to the click event on the submit button itself.
Any thoughts on what I may be doing wrong?