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

我希望按下回车键执行基于jQuery的Ajax表单提交。显然这涉及到停止正常的表单提交过程。我的表单由单个输入字段组成。下面是代码：使用jquery阻止表单提交的问题

<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 /添加”但事实并非如此，而是提交一个完全成熟的http请求为“AJAX”的默认行为（在Chrome至少）。

我在做什么错？

来源

2010-10-04 rutherford

嗯。那么，如果你的javascript中有任何东西被破坏，你可能甚至没有得到像submit（）这样的......如果你使用Firebug等调试器来运行这个控制台，你会发现控制台中有任何错误吗？ – 2010-10-04 13:52:56

这是非常值得使用一些工具来帮助你的东西。查看使用属于Chrome或Safari（Ctrl + Shift + I）的开发工具，或在Firefox上安装Firebug，或使用免费的Visual Studio环境（用于IE）。他们中的任何人都会指出该代码的几个问题。留下很少出问题 - – 2010-10-04 13:53:26

没有错误的萤火固定下面 – rutherford 2010-10-04 14:09:38

更新：现在你已经清除了以前的问题，我没有看到任何问题。基本上，它的工作原理如下：http://jsbin.com/ugowa4（在Chrome，Firefox和Opera for Linux上测试; IE6和IE8）。您必须通过调试器才能找出问题出在哪里。基本知识应该可以工作。

看起来你忘了声明事件参数：

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

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

另请参见尼克关于结束标记（应该是</script>）和错位;的说明。

来源

2010-10-04 13:50:45

我还有一小段javascript，显然隐藏了我上面发布的代码的缺陷;交换了自己的位置，并立即行动起来，欢呼声 – rutherford 2010-10-04 17:50:11

@rutherford：我们都做到了。很高兴这有帮助。 – 2010-10-04 21:15:37

作为一般规则，任何JavaScript错误可能会导致相同的行为没有JavaScript的所有，这就是你看到的...因为脚本错误的默认提交行为。我在下面列出的问题：

你关闭标签熄灭：

</javascript>

应该是：

</script>

对象还没有文字应该有一个特性;，所以更改：

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

要：

$.ajaxSetup({ 
    cache:false 
});

最后，删除此：

e.preventDefault();

你return false已经照顾这个（反正会错误的原因是缺少的参数，如在TJ的答案）。

来源

2010-10-04 13:50:03

我删除了分号和e.preventDefault（）的调用。是我的问题中的拼写错误。仍然没有弹出警告框和默认行为。 – rutherford 2010-10-04 14:04:57

你有没有中的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>

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

来源

2010-10-04 15:45:41 Oleg

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

回答

相关问题