提交前删除表格

时间:2018-11-29 18:03:38

标签: javascript ajax

我有一个页面可通过AJAX加载部分

例如:

<!-- Email Section -->
<div id=\"email-container\" class=\"body-container hidden\">

</div>

<!-- Users Section -->
<div id=\"user\" class=\"body-container hidden\">

</div>

<!-- File-Upload Section -->
<div id="upload-container" class="body-container hidden">

</div>

当用户单击链接时,“旧”部分消失,而出现“新”部分。 “新”部分已加载并覆盖了之前可能存在的所有数据...

function showSection(section, link) {
    $(".body-container").addClass('hidden');
        $("#" + section + "-container").removeClass('hidden');
        $(".menu-item").removeClass('current-menu-item');
        $("#" + link).addClass('current-menu-item');

        var jqxhr = $.get("./sections/" + section)
            .done(function (response) {
                $("#" + section + "-container").html(response);
            })
            .fail(function () { 
                // blah  
            });

在上载部分,我有一个表单,它是通过AJAX提交的。

$(document).on('submit', '#upload', function() {
    var form_data = new FormData(this);

    $.ajax({
        url: 'upload.php', 
        cache: false,
        contentType: false,
        processData: false,
        data: form_data,
        type: 'post',
        success: function(response){
            // do stuff with response. Don't care if it fails for now
        }
    });

    return false;
});

我的问题是,如果我多次加载此上传页面,则会创建多个表单,因此多次发送和上传相同的信息。

我如何删除以前创建的旧表单,所以无论用户已加载该节多少次,每次用户单击“提交”都仅提交一个表单?

先谢谢您。

1 个答案:

答案 0 :(得分:0)

基于对问题的评论,看来问题的根源是这样:

$(document).on('submit', '#upload', function() {
    //...
});

由于这是通过AJAX加载的内容的一部分,因此每次加载内容时都会执行。具体来说,这是在submit元素中添加document处理程序。因此,每次加载内容时,都会添加另一个submit处理程序。当所有这些处理程序执行时,它们都将执行相同的操作。

如果您确实希望将处理程序包含在内容中,请直接绑定到元素:

$('#upload').on('submit', function() {
    //...
});

只要#upload元素被销毁并且每次加载内容时都创建一个新元素,附加到该元素的任何处理程序也会被销毁。

但是,老实说,我推荐另一种方法。将功能与内容分开。将submit处理程序保持在document上,但将代码移到整个“父”页面中,而不是动态加载的内容中。这样,它仅在页面加载时执行一次,而无需再次执行。

根据需要经常刷新内容,但一次定义整体功能