利用JavaScript阻止表单提交的两种方法

在JavaScript中，阻止表单默认提交行为的方法有两种，分别是：

（1） return false

示例代码

<form name="loginForm" action="login.aspx" method="post">
 <button type="submit" value="Submit" id="submit">Submit</button>
</form>

<script>
 var submitBtn = document.getElementById("submit");

 submitBtn.onclick = function (event) {
  alert("preventDefault!");
  return false;
 };
</script>

（2） 使用preventDefault()

在标准浏览器中，阻止浏览器默认行为使用event.preventDefault()，而在IE6~8中，使用returnValue属性来实现。

示例代码

<form name="loginForm" action="login.aspx" method="post">
 <button type="submit" value="Submit" id="submit">Submit</button>
</form>

<script>
 var submitBtn = document.getElementById("submit");

 submitBtn.onclick = function (event) {
  alert("preventDefault!");
  var event = event || window.event;
  event.preventDefault(); // 兼容标准浏览器
  window.event.returnValue = false; // 兼容IE6~8
 };
</script>

以上就是利用JavaScript来阻止表单提交的两种方法的全部内容，希望本文的内容对大家使用JavaScript有所帮助。

赞 (0)

相关推荐

  • js 回车提交表单两种实现方法

    1.JavaScript 方法: 复制代码 代码如下: [javascript] <script> document.onkeydown=function(event){ e = event ? event :(window.event ? window.event : null); if(e.keyCode==13){ //执行的方法 alert('回车检测到了'); } } </script> <script> document.onkeydown=function

  • JS中的form.submit()不能提交表单的错误原因

    直接上代码把: 复制代码 代码如下: <div id="register">      <h4>会员注册</h4>      <div class="formdiv">          <form method="post" action="register.php?action=register" name="register" id="r

  • 详细分析使用AngularJS编程中提交表单的方式

    详细分析使用AngularJS编程中提交表单的方式

    在AngularJS出现之前,很多开发者就面对了表单提交这一问题.由于提交表单的方式繁杂而不同,很容易令人疯掉--然而现在看来,依然会让人疯掉. 今天,我们会看一下过去使用PHP方式提交的表单,现在如何将其转换为使用Angular提交.使用Angular来处理表单,对我而言,是一个"啊哈"时刻(译者:表示了解或发现某事物的喜悦).即使它甚至都没有涉及多少Angular表层的东西,但是它却帮助用户看到表单提交之后的潜力,并且理解两种数据绑定方式. 我们会使用jQuery平台来进行这个处理

  • js防止表单重复提交的两种方法

    第一种:用flag标识,下面的代码设置checkSubmitFlg标志: 复制代码 代码如下: <script language=""javascript""> var checkSubmitFlg = false; function checkSubmit(){ if(checkSubmitFlg ==true){ return false; //当表单被提交过一次后checkSubmitFlg将变为true,根据判断将无法进行提交. } checkS

  • js校验表单后提交表单的三种方法总结

    第一种: 复制代码 代码如下: <script type="text/javascript">         function check(form) { if(form.userId.value=='') {                alert("请输入用户帐号!");                form.userId.focus();                return false;           }       if(fo

  • js禁止表单重复提交

    本文实例为大家分享了js防止表单重复提交实现代码,供大家参考,具体内容如下 <DOCTYPE html> <html> <BODY BGCOLOR="#FFFFFF"> <form name='formsubmitf' id ="the" method="post" action="XXX.php"> <input type='hidden' name='mypretime

  • jquery序列化form表单使用ajax提交后处理返回的json数据

    1.返回json字符串: 复制代码 代码如下: /** 将一个字符串输出到浏览器 */     protected void writeJson(String json) {         PrintWriter pw = null;         try {             servletResponse.setContentType("text/plain;charset=UTF-8");             pw = servletResponse.getWrit

  • 巧用js提交表单轻松解决一个页面有多个提交按钮

    复制代码 代码如下: <pre class="javascript" name="code">function check(txt){ $j("form").submit(function(){ if($txt=="提交"){ this.action="doAddMessage.action?button=提交"; this.submit(); }else{ this.action="

  • js实现a标签超链接提交form表单的方法

    本文实例讲述了js实现a标签超链接提交form表单的方法.分享给大家供大家参考.具体实现方法如下: <form action="/home/search" method="get" id="search_form"> <div class="searchBox png" id="searchBox"> <input type="text" id="

  • 利用JS提交表单的几种方法和验证(必看篇)

    工作中发现表单提交方便的问题,很多时候IE下提交好好的,打了火狐下就出现了问题,利用提交按钮就不成功了,于是利用JS的方式就成功了,也不知道为什么.在导师的催促下就总结出以下的几种常用表单提交的方法. 第一种方式:表单提交,在form标签中增加onsubmit事件来判断表单提交是否成功 <script type="text/javascript"> function validate(obj) { if (confirm("提交表单?")) { aler

随机推荐