javascript - 如何删除旧表格以停止重复提交

Question

我正在使用 AJAX 从模式窗口提交表单。如果表单提交时出错，服务器将发回一个新表单。然后删除包含旧表单的容器，并在其位置设置带有验证错误的新表单。

问题是，由于某种原因，它在验证错误被修复后同时提交了 2 个表单。好像旧表格没有被删除？

它不会在我使用onclick=functionCall()语法时发生，而是在我使用$('form').on('submit', e => {语法时发生。我正在尝试使用后者，因为有人告诉我 onX 事件现在被认为是不好的做法。

任何有关了解正在发生的事情以及如何解决它的帮助都会很有用。

形式：

    // Submit Form
$('form').on('submit', e => {
    e.preventDefault();
    let data = new FormData($(e.target).get(0));
    const btn = $(e.target).find('button:submit')
    const container = document.getElementById('formFields')
    $.ajax({
        url         : e.target.action,
        data        : data,
        type        : 'POST',
        headers     : {"X-CSRFToken": token},
        enctype     : 'multipart/form-data',
        processData : false,
        contentType : false,
        success     : function (data) {
            btn.toggleClass('btn-warning btn-secondary').prop('disabled', true)
        },
        error       : function (data) {
            container.innerHTML = loadingSpinner;
            $(container).empty();
            $(container).html(data['responseJSON']['table']).fadeIn('slow');
        },
    });
});

看法：

@login_required
def load_add_memo_form(request, pk=None):
    if request.method == 'POST' and request.is_ajax():
        memo_form = MemoForm(
            data=request.POST,
            files=request.FILES,
            company=request.tenant)
        memo_form.instance.sender = request.user
        if pk:
            memo = get_object_or_404(Memo, pk=pk)
            memo_form = Memo(
                data=request.POST,
                files=request.FILES,
                company=request.tenant,
                instance=memo)
        if memo_form.is_valid():
            if request.user.role.supervisor is None or request.user is memo_form.sender:
                memo_form.save()
                reason_for_notification = 'memo to view'
                notifier = SendNotifications(request, reason_for_notification, memo_form)
                notifier.send_notifications()
                return JsonResponse({'success': True})
        else:
            data = {'table': render_to_string('memos/components/add_memo_form.html', context={'form': memo_form})}
            return JsonResponse(data, status=400)
    else:
        memo_form = MemoForm(company=request.tenant)
        if pk:
            memo = get_object_or_404(Memo, pk=pk)
            memo_form = MemoForm(company=request.tenant, instance=memo)
        context = {'form': memo_form}
        template = 'memos/components/add_memo_form.html'
        return render(request, template, context)

很明显，表单只是模板语言......

标签： javascriptdjango