Default form submit behavior after jQuery forms.js ajaxSubmit executes

Question

I'm using the jQuery Form Plugin to bind the submit events for two forms on the same page so that they are submitted to separate PHP scripts that return markup to separate divs on the page.

One form refreshes the next. I use "live" so each form has its events re-bound when it is refreshed:

$(document).ready(function() {
    /* Form 1 */
    $('#frmSearch').live('submit', function() {
     $(this).ajaxSubmit({
      target: '#divResults',
      url: 'search_div.php'
     });
     return false;
    });
    /* Form 2 */
    $('#frmResults').live('submit', function() {
     $(this).ajaxSubmit({
      target: '#divLookup',
      url: 'lookup_div.php',
     });
     return false;
    });
});

So far so good. Each form can be submitted again and again with ajax and all the bindings survive from one submit to the next.

The problem arises when I try to bind a third form and fire its submit event in the "success" option of the second form:

/* Form 2 */
$('#frmResults').live('submit', function() {
    $(this).ajaxSubmit({
     target: '#divLookup',
     url: 'lookup_div.php',
     success: function(responseText){
      $('#frmLookup').submit();
     }
    });
    return false;
});
/* Form 3 */
$('#frmLookup').live('submit', function() {
    $(this).ajaxSubmit({
     target: '#divMappings',
     url: 'mapped_items_div.php',
    });
    return false;
});

When I do this, the ajaxSubmit successfully executes but then the form's default submit is performed as well, causing the page to reload. Notice that I do include the "return false;" to suppress the form's default submit, but for some reason it submits anyway.

I've found that if I "bind" on Form 3's "submit" event in Form 2's success function with the same options as the "live" for Form 3, the form's default submit is not performed. This is redundant, though, and if I can I would like to avoid doing it.

How can I suppress Form 3's default submit behaviors?

Answer 1

I know it should be the same, but since this seems a really strange behavior, I would try replacing

$('#frmLookup').submit();

for

$('#frmLookup').trigger('submit');

to see if that changes anything?

Answer 2

Not sure if it's related to your problem, but live() does not support the "submit" event:

Currently not supported: blur, focus, mouseenter, mouseleave, change, submit

Answer 3

Thanks, crescentfresh, for getting me on the right track. For my solution, I modified my scripts to print only the elements nested within the forms as opposed to the forms themselves and their contents. I then changed the "target" of each form to the next form instead of the div containing the next form. This eliminates the need to re-bind the submit event for each form since the ajax function from the previous form merely replaces its inner elements instead of "refreshing" it altogether.

I also decided it was appropriate to do away with the form plugin and simply use ".serialize()" along with ".ajax" as illustrated by Paolo Bergantino here.

My final product looks something like this:

/* Form 1 */
$('#frmSearch').bind('submit', function() {
    var formdata = $(this).serialize();
    $.ajax({
     url: 'result_form.php',
     data: formdata,
     success: function(responseText){
      $('#frmResults').html(responseText);
     }
    });
    return false;
});

/* Form 2 */
$('#frmResults').bind('submit', function() {
    var formdata = $(this).serialize();
    $.ajax({
     url: 'lookup_div.php',
     data: formdata,
     success: function(responseText){
      $('#frmLookup').html(responseText);
      $('#frmLookup').trigger('submit');
     }
    });
    return false;
});

/* Form 3 */
$('#frmLookup').bind('submit', function() {
    var formdata = $(this).serialize();
    $.ajax({
     url: 'mapped_items_div.php',
     data: formdata,
     success: function(responseText){
      $('#divMappings').html(responseText);
     }
    });
    return false;
});