Javascript表单提交运行

我有一些问题得到一些JavaScript代码运行时提交表单。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/

来源

2013-11-25 user2158382

你从来没有定义e，所以e.preventDefault();抛出一个异常和脚本停止。

您可以删除e.preventDefault();或移动到现代事件绑定的风格：

停止使用固有的事件属性，与JS绑定你的事件处理程序，并确保您接受事件对象的参数。

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

阅读该文档（MDN是看的好地方），对浏览器的支持和替代querySelector和addEventListener就留给读者自己练习。

来源

2013-11-25 00:08:07 Quentin

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(); 
});

我想这将是简单的解决方案，你就不必处理浏览器兼容性问题（哎IE，我看着你）与event变量和addEventListener/attachEvent。 jQuery为你照顾。

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

来源

2013-11-25 00:12:07

如果您尝试取消submittion只是用户return false;在你的代码，或在的onsubmit

使用return false;像下面

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

或

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

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

来源

2013-11-25 00:12:30

'e.preventDefault（）'和'return false'都会阻止默认事件（即提交表单并加载操作页面）。在操作系统中，它不是每个人都需要的，但我认为他可能需要它。 – Halcyon

Javascript表单提交运行

回答

相关问题