Delete a form before submission

Question

I have a page that loads sections through AJAX

For example:

<!-- 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>

When the user clicks on a link, the "old" section goes away and the "new" section appears. The "new" section is loaded and overwrites any data that may have been there before...

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

On the upload section, I have a form and it's submitted through 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;
});

My problem is that if I load this upload page more than once, more than one form is created and thus the same information is sent and uploaded multiple times.

How can I delete the old forms that were created before so only ONE form is submitted each time the user clicks "submit", regardless of how many times the section has been loaded?

Thank you in advance.

Answer 1

Based on comments on the question, it looks like the root of the problem is this:

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

Since this is part of the content being loaded via AJAX, it's executing every time that content loads. Specifically what this is doing is adding a submit handler to the document element. So each time the content loads, another submit handler is added. When all of those handlers execute, they all do the same thing.

If you really want the handler to be included in the content, bind directly to the element:

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

As long as the #upload element is destroyed and a new one created each time the content is loaded, any handlers attached to that element will be destroyed as well.

However, I'd honestly recommend another approach. Separate the functionality from the content. Keep your submit handler on document as it already is, but move that code into the overall "parent" page instead of in the dynamically loaded content. That way it only executes once when the page loads and doesn't need to execute again.

Refresh the content as often as you like, but define the overall functionality once.