jQuery Forms.js ajaxSubmit执行后的默认表单提交行为 [英] Default form submit behavior after jQuery forms.js ajaxSubmit executes

问题描述

我正在使用jQuery Form Plugin绑定同一页面上两个表单的Submit事件，以便将它们提交到单独的PHP脚本中，这些脚本将标记返回到页面上的单独div.

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;
    });
});

到目前为止，一切都很好.每种表单都可以使用ajax一次又一次地提交，并且所有绑定从一次提交到下一次都可以保留.

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.

当我尝试绑定第三种形式并在第二种形式的成功"选项中触发其Submit事件时，就会出现问题:

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;
});

执行此操作时，ajaxSubmit成功执行，但随后还执行了表单的默认提交，从而导致页面重新加载.注意，我确实包含"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.

我发现，如果我使用与窗体3的活动"相同的选项绑定"窗体2的成功功能中窗体3的提交"事件，则不会执行窗体的默认提交.不过，这是多余的，如果可以的话，我想避免这样做.

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.

如何抑制Form 3的默认提交行为?

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

推荐答案

感谢crescentfresh，让我步入正轨.对于我的解决方案，我修改了脚本以仅打印嵌套在表单中的元素，而不打印表单本身及其内容.然后，我将每个表单的目标"更改为下一个表单，而不是将div包含在下一个表单中.这样就不需要为每个表单重新绑定Submit事件，因为前一个表单中的ajax函数仅替换其内部元素，而不是完全刷新"它.

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.

我还决定取消该表单插件，而只需使用".serialize()"和".ajax"即可，如Paolo Bergantino

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;
});

这篇关于jQuery Forms.js ajaxSubmit执行后的默认表单提交行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！