无法通过 Ajax 提交表单

Question

编辑

只要表单有效，下面的代码似乎就可以工作。

但如果不是这种情况（django 表单中的 clean 方法）表单的 h1 文本被删除（????）并且不显示错误消息...

我猜想一个空的 popup.html 是通过 ajax 返回的，因为没有按钮可以与任何事情发生交互，但是为什么要删除 h1 文本...???

   var prevent_edit = false;
    var prevent = false;

    // popup d'informations indiquant que la levée d'insue a déjà été faite 
    // pour ce patient
    $("#form_unblind_edit").submit(function (event) {
        console.log('form_unblind_edit click - first')
        console.log('prevent_edit - first', prevent_edit)
        if (!prevent_edit) {
            event.preventDefault();
        }
    });

    function getCookie(name) {
        var cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = cookies[i].trim();
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }


    // affichage des informations sur le patient sélectionné pour la ré-allocation
    $("#unblind_edit").on("click", function (event) {
        console.log('click unblind edit');
        var csrftoken = getCookie('csrftoken');
        var patient = $("#id_pat").val();
        $.ajax({
            type: "POST",
            url: '/unblind/already_unblind/',
            data: {
                csrfmiddlewaretoken: csrftoken,
                'patient': patient,
            },
            dataType: 'html',
            success: function (data) {
                console.log('success');
                // var prevent_edit = false;
                $("#can_unblind").html(data);
                $('#unblindconfirm').modal('show');

                $('body').on('click', '#edit_button_OK', function (event) {
                    console.log('edit_button_OK')
                    $('#edit_button_OK').attr("disabled", "disabled");
                    prevent_edit = true;
                    console.log('prevent_edit', prevent_edit);
                    $("#form_unblind_edit").submit();
                })
            },
            error: function (resultat, statut, erreur) {
                console.log('error');
            }
        });

    });

---

我需要一些关于 ajax 弹出窗口的帮助

用户填写表单并通过单击按钮提交表单

我阻止使用event.preventDefault(); 提交以显示弹出窗口。

但我需要向数据库询问要在弹出窗口中显示的信息，所以我使用了 ajax 查询

当 ajax 成功时，弹出窗口显示来自数据库的信息，我希望通过单击弹出窗口的“确定”按钮提交表单

但我认为它失败了，因为事件（提交）附加到页面加载时 DOM 中不存在的按钮...

JS

$(document).ready(function () {

    var prevent_edit = false;

    // prevent submission
    $("#form_unblind_edit").submit(function (event) {
        if (!prevent_edit) {
            event.preventDefault();
        }
    });
    // ajax query that display popup
    $("#unblind_edit").on("click", function (event) {
        var csrftoken = getCookie('csrftoken');
        var patient = $("#id_pat").val();
        $.ajax({
            type: "POST",
            url: '/unblind/already_unblind/',
            data: {
                csrfmiddlewaretoken: csrftoken,
                'patient': patient,
            },
            dataType: 'html',
            success: function (data) {
                $("#can_unblind").html(data); //popup html attach to DOM
                $('#unblindconfirm').modal('show');  //popup displayed
                $('body').on('click', '#edit_button_OK', function (event) {
                    console.log('edit_button_OK'); // WORKING
                    prevent_edit = true;
                    $("#form_unblind_edit").trigger('submit');  //form submission = NOT WORKING
                })
            }

        });
});

Answer 1

可能将表单中提交按钮的类型改为“按钮”

<button type="button">Submit</button>

这样，当用户单击提交时不会执行提交操作，而是显示弹出窗口。然后你应该可以使用 JQuery 提交表单了。

 $("#form_unblind_edit").trigger('submit');