Question

我遇到一些问题，只要提交表单，就会运行一些javascript代码。

这是我的代码

   <form onsubmit="return header_search()" class="navbar-form navbar-right">
      <div class="form-group">
         <input type="text" placeholder="Tack" class="form-control">
      </div>
      <button type="submit" class="btn btn-success">Search</button>
   </form>

   <script>
       function header_search() {
          e.preventDefault();
          alert("submitted");
       } 
   </script>

http://jsfiddle.net/Fgwzn/

Answer 1

As @Quentin said，它没有按预期运行，因为您没有在任何地方定义e。

当你标记jQuery时，我会建议使用它的另一种选择。在表单中添加ID，然后在JavaScript中定义onsubmit行为。

<强> HTML

<form id="your-form" class="navbar-form navbar-right">
    ...
</form>

<强>的JavaScript

$('#your-form').submit(function(e) {
    alert('submitted');
    e.preventDefault();
});

我认为这将是更简单的解决方案，因为您不必使用event变量和addEventListener / {{来处理浏览器兼容性问题（嘿IE，我正在看着你） 1}}。 jQuery会为你解决这个问题。

小提琴： http://jsfiddle.net/MGA74/

Answer 2

您永远不会定义e，因此e.preventDefault();会抛出异常而脚本会停止。

您可以删除e.preventDefault();或移至现代事件绑定样式：

停止使用内部事件属性，使用JS绑定事件处理程序，并确保接受事件对象的参数。

function header_search(e) {
  e.preventDefault();
  alert("submitted");
} 
document.querySelector('form').addEventListener('submit', header_search);

在浏览器支持上阅读文档（MDN是一个值得关注的地方），querySelector和addEventListener的替代方案留给读者阅读。

Answer 3

如果您尝试取消提交，只需在代码中使用return false;或使用onsubmit中的return false;

如下所示

   <script>
       function header_search() {
          alert("submitted");
          return false;
       } 
   </script>

或

<form onsubmit="header_search(); return false;"...

编辑：e.preventDefault（）;不需要。表格标签中也不需要返回。

Javascript在表单提交上运行

3 个答案: