Question

我希望在按下回车键的情况下执行基于jquery的ajax表单提交。显然，这涉及停止正常的表单提交过程。我的表单由一个输入字段组成。这是代码：

<script type="text/javascript">
$(document).ready(function() {
    // add vid ajax
    $.ajaxSetup({
        cache:false;
    });
    var ajax_load = '<div class="displayBox">Adding url...</div>';
    var loadUrl = 'ajax/add';

    $("#vidForm").submit(function(){
        e.preventDefault();
        alert("hello");
        /*$("body").html(ajax_load)
        .load(loadUrl,{url:$("#addurl").value},function(responseText){
            $("#videos").append(responseText);
        });*/
        return false;
    });

});
</javascript>
...
<form id="vidForm" action="ajax/">  
    <input id="addurl" name="addurl"/>
</form>

我希望上面的内容提交给'ajax / add'，但它没有提交，而是向'ajax'提交一个完整的http请求默认行为（至少在Chrome中）。

我做错了什么？

Answer 1

作为一般规则，任何JavaScript错误都可能导致与完全没有JavaScript 相同的行为，这就是您所看到的...... 默认由于脚本错误导致的提交行为。我已经概述了以下问题：

您的结束标记已关闭：

</javascript>

应该是：

</script>

对象文字也不应该有;属性，所以更改：

$.ajaxSetup({
    cache:false;
});

要：

$.ajaxSetup({
    cache:false
});

最后，删除它：

e.preventDefault();

你的return false已经在处理这个问题了（因为缺少参数会出错，就像在TJ的回答中一样）。

Answer 2

更新：既然您已经清除了之前的问题，我就没有发现任何问题。从根本上说，它可以工作：http://jsbin.com/ugowa4（在Chrome，Firefox和Opera for Linux上进行测试; IE6和IE8。）您必须通过调试器来了解事情失败的原因。基础知识应该有效。

您似乎忘记了声明事件参数：

$("#vidForm").submit(function(e){
                              ^--- Add this

没有它，您尝试从包含范围访问变量e。如果没有一个，或者它没有一个名为preventDefault的函数，那么你将得到一个异常，并且该函数的其余部分将被忽略。

另请参阅Nick关于结束标记的说明（应该是</script>）和错误的;。

Answer 3

submit中是否有form类型的按钮？例如

<form id="vidForm" action="ajax/">  
    <input id="addurl" name="addurl"/>
    <button type="submit">Send</button>
</form>

或

<form id="vidForm" action="ajax/">  
    <input id="addurl" name="addurl"/>
    <input type="submit" value="Send" />
</form>

单击示例中的“发送”按钮将提交表单。如果您的表单有更多元素，请发布整个代码。

使用jquery阻止表单提交的问题

3 个答案: