Question

我有一个通过ajax提交的表单。它不是重新加载页面，它只是显示一条成功消息，这正是我想要的。在我的页面上，我可以有几种具有不同ID但同一个类的表单。我将课程定位为提交。但是我有两种不同类型的形式，新形式和现有形式（基本上是添加或更新）。更新的程序工作正常，但是添加的程序在我尝试退出页面时给我浏览器警报。他们认为他们尚未提交。

这是我的代码：

    $("#simulation-table").on('submit', '.simulation_form', function(event){
        event.preventDefault(); //prevent default action 
        var post_url = $(this).attr("action"); //get form action url
        var request_method = $(this).attr("method"); //get form GET/POST method
        var form_data = $(this).serialize(); //Encode form elements for submission
        var form_id =$(this).attr("id");

        $.ajax({
            url : post_url,
            type: request_method,
            data : form_data
        }).done(function(response){
            response = JSON.parse(response);
            if ((response.success === true || response.success == 'true') && (response.new === false || response.new == 'false')) {
                alert_float('success', response.message);
                $formSub = $('body').find('#' + form_id);
                $formSub.find('.edit-field input').each(function () {
                    $(this).attr('readonly', true);
                });
                $formSub.find('.save_button button').prop('disabled', true);
            } else {
                alert_float('success', response.message);
                $formSub = $('body').find('#' + form_id);
                $formSub.find('.edit-field input').each(function () {
                    $(this).attr('readonly', true);
                });
                $formSub.find('.save_button button').prop('disabled', true);
                $formSub.removeAttr('id');
                $formSub.attr('id', 'simulation_form_' + response.insert_id);
                $formSub.find('input[name="id"]').val(response.insert_id);
                $formSub.attr('action', admin_url + 'leads/simulation/' + response.insert_id);
            }
        });
    });

在收到成功响应后，我必须更改add函数的表单ID，这就是为什么我拥有最后一段代码。为什么我会收到此浏览器警报，提示未提交更改？

我的问题不在于Submit事件，因为它正在触发并成功完成。浏览器（在本例中为Firefox）会警告我是否要退出页面，因为某些数据可能未保存，但表单已正确提交。

编辑：标记为重复的代码已更新。没有解决

Answer 1

jQuery插件“您确定吗”正在发送警报。使用@Barmar建议$（'＃my-form'）。trigger（'reinitialize.areYouSure'）;工作了！

代码已更新：

$("#simulation-table").on('submit', '.simulation_form', function(event){
        event.preventDefault(); //prevent default action 
        var post_url = $(this).attr("action"); //get form action url
        var request_method = $(this).attr("method"); //get form GET/POST method
        var form_data = $(this).serialize(); //Encode form elements for submission
        var form_id =$(this).attr("id");

        $.ajax({
            url : post_url,
            type: request_method,
            data : form_data
        }).done(function(response){
            response = JSON.parse(response);
            if ((response.success === true || response.success == 'true') && (response.new === false || response.new == 'false')) {
                alert_float('success', response.message);
                $formSub = $('body').find('#' + form_id);
                $formSub.find('.edit-field input').each(function () {
                    $(this).attr('readonly', true);
                });
                $formSub.find('.save_button button').prop('disabled', true);
            } else {
                alert_float('success', response.message);
                $formSub = $('body').find('#' + form_id);
                $formSub.find('.edit-field input').each(function () {
                    $(this).attr('readonly', true);
                });
                $formSub.find('.save_button button').prop('disabled', true);
                $formSub.removeAttr('id');
                $formSub.attr('id', 'simulation_form_' + response.insert_id);
                $formSub.find('input[name="id"]').val(response.insert_id);
                $formSub.attr('action', admin_url + 'leads/simulation/' + response.insert_id);
                $formSub.trigger('reinitialize.areYouSure');
            }
        });
    });

按照@PratrickEvans的建议，更新了在事件上使用jquery的最佳实践代码，并根据@Barmar的建议，在动态创建新表单时将reinitialize触发器添加到了表单中。

为什么我的Ajax表单认为未提交？

1 个答案: