Question

我基本上复制了我在网站上运行的整个表单提交代码，并将其粘贴到一个空白文件中，以便修改其内容并节省一些时间。在理论中，如果原始文件在完成提交的同时停止正常表单提交以打开Action目标文件，那么这个文件也应该这样做。

然而，我不能像它一样工作。我无法阻止提交离开当前窗口。

任何人都可以指出我做错了吗？

（除了PHP代码我使用的是jQuery Validation Plugin，就像我在上一个表单中使用的那样，按预期工作。）

表单HTML代码：

<form id="form" class="appintro" method="post" action="manageform.php" enctype="multipart/form-data"></form>

JS

$.validator.setDefaults({
    submitHandler: function() { //<-- Handler called by jQuery Validation once form is validated
        $('.msg.sending').fadeIn(200);
        $.ajax({
            type: 'POST',
            url: form.attr('action'),
            data: form.serialize(),
            success: function() {
                alert('Success')
    },
            error: function() {
                alert('Failure')
            }
        });
        return false; //<-- This should stop the normal submission...
    }
});

我也尝试在validator代码之外调用AJAX，即使用$("form").submit(function(event)...等。还尝试将data设置为form.serializeArray()，如其他一些SO帖子......什么都没有。

提前感谢您的帮助！

编辑1

我已设置此jsFiddle以在更简单的版本中测试它。无论我在AJAX的url中放置什么，我都会收到错误。如果我填写表格的action，那么我就无法收到提交内容。

Answer 1

编辑2 好的同时修复了我的js小提琴中的一些错误，我想出了问题所在。

此行缺少表单参数

submitHandler: function() {

它应该是这样的：

submitHandler: function(form) {

接下来，要调用serialize，需要将其换成jquery对象。 jquery validate传入的表单只是一个常规表单对象而不是jquery表单。所以你需要这样做。

data: $(form).serialize(),

如果您致电form.serialize，您应该会在Chrome中遇到此错误：Uncaught TypeError: Object #<HTMLFormElement> has no method 'serialize'，这可以解释您的浏览器重新加载的原因。

修改1 我看着你的小提琴，我发现了一些错误，但我不确定他们是否解决了你的问题。我觉得我只修复了一些特定于jsfiddle的错误。

以下是有效的更新小提琴的链接：http://jsfiddle.net/JSuUL/6/

以下是包含一些注释的代码

$.validator.setDefaults({
    // Need to pass in form variable
    submitHandler: function (form) {
        alert('Sending...')
        $.ajax({
            type: 'POST',

            // First off changed this to make the request work
            // http://doc.jsfiddle.net/use/echo.html
            url: '/echo/html/',

            // Instead of form, I used $(form) to reference the form as a jquery object.
            data: $(form).serialize(),

            success: function () {
                alert('Success!')
            },
            error: function () {
                alert('Failure!')
            }
        });
        return false;
    }
});

$(document).ready(function () {
    // I added a "#" here so we can grab the form. Your jsfiddle had $(form)
    $("#form").validate({
        rules: {
            name: {
                required: true,
                minlength: 2
            },
            surname: {
                required: true,
                minlength: 2
            },
        }
    });
});

无法停止打开Action目标的AJAX表单提交

1 个答案: