Question

我正在编写一个表单，插入客户端的网页中，并通过AJAX请求进行处理。然后，根据客户端的设置，我想要显示“表单成功提交”的胜利消息，或者我想将用户重定向到我的网站（通过将表单提交到我的网站）以进行其他处理。

我正在使用jQuery来尝试让它工作。我的策略是在表单上对提交事件进行“实时”绑定，然后阻止默认提交，并使用表单值作为参数在我的站点上进行处理。如果表单通过验证并且确定用户需要重定向，则表单提交会再次触发，但这次提交处理程序返回true，这应该启用默认值，对吧？它确实返回true（我检查了警报），但表单未提交。以下是示例代码：

<form id="myform">
    <!-- Elements in here -->
    <input type="submit" value="Submit" name="submit" id="submit">
</form>
<script>
    var handleSubmit = true;
    $("#myform").live('submit', function(){
        if (handleSubmit === true){
            $.post('http://example.org', $('#myform').serialize(), function(response){
                if (response.success){
                    if (response.redirect){
                        handleSubmit = false;
                        $('#myform').attr('action',response.redirect);
                        $('#myform').submit();
                    } else {
                        alert('success!');
                    }
                } else {
                    // replace form contents with response.html (the form w/ errors)
                }
            }, 'json');
            return false;
        } else {
            // submit form (default action)
            return true;
        }
    });
</script>

我尝试了不同的方法，例如将提交触发器放在setTimeout中，或者使用'bind'而不是使用live，但结果是一样的。

可能需要注意的一件事是，上面的代码和表单本身的代码也是从客户端站点的AJAX请求生成的。

您可以给予任何指导，我将不胜感激。我也非常愿意接受不同的方式。

谢谢！

Answer 1

您遇到的问题实际上是输入元素：

<input type="submit" value="Submit" name="submit" id="submit">

重定向表单提交失败，因为form元素中的表单控件名称在DOM中显示为form的属性，并且可能导致与form原始文件冲突属性。当通过jQuery的事件函数触发事件时，这样的冲突将无声地失败。将input元素更改为以下内容可以解决您遇到的问题：

<input type="submit" value="Submit">

jQuery：使用“实时”方法防止然后阻止表单提交

1 个答案: