时间戳

首页 > 解决方案 > 为什么我的 ajax 表单认为它没有提交？

javascript - 为什么我的 ajax 表单认为它没有提交？

问题描述

我有一个通过 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，这就是我拥有最后一段代码的原因。为什么我会收到关于未提交更改的浏览器警报？

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

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

标签： javascriptjqueryajax

解决方案

Jquery 插件 Are You Sure 正在发送警报。使用 $('#my-form').trigger('reinitialize.areYouSure'); 的@Barmar 建议 工作！

代码更新：

$("#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 的建议

推荐阅读