FORM中使用onSubmit="return false"防止表单自动提交，以及submit和button提交表单的区别

最新推荐文章于 2021-09-29 18:00:59 发布
最新推荐文章于 2021-09-29 18:00:59 发布
阅读量1.7k 收藏
点赞数
分类专栏： 前端js 文章标签： HTML submit

在页面中有多个input type="text"的文本输入框的情况下没有问题，但是当页面中有只有一个文本框的情况下()，就会出现此问题.

 

后来在form 中添加：οnsubmit="return false;"问题终于解决。

<form name="frm"  method="post" οnsubmit="return false;">

 

 

下边对“防止表单自动提交，以及submit和button提交表单”进行了些总结，希望对大家有些用（如果有不当的地方请指出）。

<html> 
<script>

function exec(p){ 
    document.frm.action = p; 
    document.frm.submit(); 
} 
function exec1(p){ 
    document.frm.action = p; 
    document.frm.submit(); 
    document.frm1.submit();//IE页面定位到最后一个提交的action所对应的页面 
    alert("haha");//submit()后边的语句正常执行，这里弹出框文字”haha“ 
} 
</script> 
<head> 
<h1>总结：FORM onSubmit="return false"防止表单自动提交，以及submit和button提交表单的区别</h1> 
<head> 
<body> 
<!-- （1） 下边的写法使得表单frm能够自动提交  
下边的这个form，将鼠标点进的文本框中然后按键盘的回车键，则页面自动进入百度页面：http://www.baidu.com 
<form name='frm'  action="http://www.baidu.com">  
    <input type="text" name= "userName"/> 
    <input type="hidden" name= "userName1"/> 
</form>

注意：将上边的“<input type="hidden" name= "userName1"/>”去掉或者增加上，都不能改变页面的自动提交！ 
-->

<!-- （2）而同样的写法，进行如上的操作，却不会提交 
可能是有两个文本输入框的缘故吧（注意：上边仅有一个）。 
那如果一个页面中有多个from会怎样？？后边有相关试验。

<form name='frm'  action="http://www.baidu.com">  
    <input type="text" name= "userName"/> 
    <input type="text" name= "pass"/> 
</form> 
-->

<!-- （3）下面试试，同一个页面有多个from的情况 
 这里先试试多个form、每个form中仅有一个文本输入框 
<form name='frm1' action="http://www.baidu.com">  
    <input type="text" name= "userName"/> 
    <input type="hidden" name= "userName1"/> 
</form> 
<form name='frm2'  action="http://www.google.cn/">  
    <input type="text" name= "userName"/> 
</form> 
经试验，每个from中的文本输入框都具有自动提交的能力。 
-->

 

<!-- （4）下面试试，同一个页面有多个from的情况 
 这里先试试多个form、有的form中仅有一个文本输入框，有的form中则有多个文本输入框 
<form name='frm1' action="http://www.baidu.com">  
    <input type="text" name= "userName"/> 
    <input type="text" name= "passWord"/> 
</form> 
<form name='frm2' action="http://www.google.cn">  
    <input type="text" name= "userName"/> 
</form> 
<form name='frm3' action="http://www.yahoo.com">  
    <input type="text" name= "userName"/> 
    <input type="text" name= "passWord"/> 
</form> 
经试验，只有 frm2 具有自动提交的特性。

看来：只要页面中的某个表单中仅有一个文本输入框，则其页面就具有自动提交的特性了。 
--> 
<!--（5）如何防止页面自动提交？！ 
很简单！只要在from 中加上 onSubmit="return false;"就OK了！ 
<form name='frm1' action="http://www.baidu.com">  
    <input type="text" name= "userName"/> 
    <input type="text" name= "passWord"/> 
</form> 
<form name='frm2' action="http://www.google.cn"  onSubmit="return false;">  
    <input type="text" name= "userName"/> 
</form>

呵呵，经过onSubmit="return false;" 改造后，frm2不再自动提交了！ 
--> 
<!--（6）下边看看input type="submit"对提交表单的影响

这里不拿仅有一个文本框的form进行测试了(如果不用onSubmit="return false;" ，它是自动提交的) 
<form name='frm1' action="http://www.baidu.com"> 
    <input type="text" name= "userName"/> 
    <input type="text" name= "passWord"/> 
    <input type="submit"  value="提交1"/> 
</form> 
<form name='frm2' action="http://www.google.com"> 
    <input type="text" name= "userName"/> 
    <input type="text" name= "passWord"/> 
    <input type="submit"  value="提交2"/> 
</form> 
则，分别鼠标点击frm1、frm2中的文本框并按回车后，会根据各自的action来进入不同的页面 
--> 
<!--（7）下边看看input type="button"对提交表单的影响 
<form name='frm1' action="http://www.baidu.com"> 
    <input type="text" name= "userName"/> 
    <input type="text" name= "passWord"/> 
    <input type="button"  value="提交1"/> 
</form> 
<form name='frm2' action="http://www.google.com"> 
    <input type="text" name= "userName"/> 
    <input type="text" name= "passWord"/> 
    <input type="button"  value="提交2"/> 
</form>

哈哈，分别鼠标点击frm1、frm2中的文本框并按回车后，都没有反应！看来button这样是不能提交表单的 
-->

<!--（8）使用 "button" 来提交表单

<form name='frm' action="http://www.baidu.com"> 
    <input type="text" name= "userName"/> 
    <input type="text" name= ""/> 
    <input type="button"  value="提交1" οnclick="exec('http://www.google.com')"/> 
</form>

userName 、passWord处都填写数据，点击button。 
OK！连上google了，IE地址栏显示：http://www.google.com/?userName=1passWord=1 
--> 
<!-- (9)使用 "button" 来提交表单——参考js exec1()中的相关注释   

--> 
<form name='frm' action="http://www.google.com"> 
    <input type="text" name= "userName"/> 
    <input type="text" name= "passWord"/> 
    <input type="button"  value="提交1" οnclick="exec1('http://www.google.com')"/> 
</form> 
<form name='frm1' action="http://www.hao123.com"> 
    <input type="text" name= "userName"/> 
</form>

</body> 
</html>
总结期间找了些关于οnsubmit="return false;"的文章，作为资料也贴在下边。

URL：http://bbsanwei.javaeye.com/blog/271547

onSubmit的使用 
  在web开发中，我们经常会遇到，一点回车键表单就自己提交的问题，能不能禁用回车键呢，答案是肯定的. 


Html代码  
<from action="" method="post" onSubmit="return false">   
...............    
</from>  


如果想在表单提交时，进行验证 

Html代码  
<html>   
<head>   
<script lanuage="javascript">   
  function check()    
{    
//验证不通过时    
return false;    
}    
</script>   
</head>   
<body>   
<from action="" method="post" onSubmit="return check()">   
...............    
</from>   
</body>   
</html>  

<html> 
<head> 
<script lanuage="javascript"> 
  function check() 
{ 
//验证不通过时 
return false; 
} 
</script> 
</head> 
<body> 
<from action="" method="post" onSubmit="return check()"> 
............... 
</from> 
</body> 
</html>

 

这样就会对表单进行验证再进行提交 

要注意的是，千万不能写成 

Html代码  
<from action="" method="post" onSubmit="check()">   
...............    
</from>  


因为check()不通过后会返回false， 因为onsubmit属性就像是<form>这个html对象的一个方法名，其值（一字符串）就是其方法体，默认返回true，所以还是相当于验证通过  
记得对表单验证一定要写成这样 

Html代码  
<from action="" method="post" onSubmit="return check()">   
...............    
</from>  

賣逗逗
关注
专栏目录
表单中submit和button按钮使用和区别
weixin_38851970的博客
07-20 1万+
1.input[type=submit] submit是button的一个特例，也是button的一种，它把提交这个动作集成了。 按回车键即提交表单 点击提交按钮后url变为？xxx=提交的内容 如果表单在点击提交按钮后需要用JS处理后再提交的话，通常都必须把submit改成button，即取消自动提交的行为，否则，会造成两次提交的结果。对于动态网页来说，也就是对数据库操作两次。或者可以在使用submit时验证加return true 或false js中check()函数判断的时候要写 ret
表单提交错误 ：onsubmit=return false阻止form表单提交
Rundy_Deng的博客
10-27 5259
return false 阻止表单提交不了 基本上关于onsubmit=return false有以下几点要注意的地方： 1. return 的返回值问题，函数中return一旦有返回值，就不在执行下面的语句，直接跳到函数调用的地方。如下PHP函数代码，第一个if条件符合则函数值返回布尔型false，可以返回一个函数的值,并且跳出这个函数；只要遇到return语句，程序就在那一行代码停
总结：form中使用onSubmit="return false"防止表单自动提交，以及s...
tangchaozxc的专栏
03-16 1132
<br />最近看书对form中onsubmit="return false;"不明白。现在知道了那样做是要防止表单的自动提交。<br />下面这篇文章总结的非常全,自己就直接拿过来修改总结了。<br />自动提交­在页面form中有多个input type="text"的文本输入框的情况下没有问题，但是当页面中有只有一个文本框的情况下()，就会出现此问题.­<br />­后来在form 中添加：onsubmit="return false;"问题终于解决。­<br />­<form name="form1
onsubmit=return false阻止form表单提交javascript
virus026的专栏
08-09 1034
<br /> <br />return false 阻止表单提交不起今天这个问题困扰了我很久，在网上找了很多资料，基本上关于onsubmit=return false有以下几点要注意的地方：<br />1. return 的返回值问题 ， 函数中return一旦有返回值，就不在执行下面的语句，直接跳到函数调用的地方。如下PHP函数代码，第一个if条件符合则函数值返回布尔型 false，可以返回一个函数的值,并且跳出这个函数；只要遇到return语句，程序就在那一行代码停止执行，执行控制将立刻返回到调用
【php】form表单中的onsubmit与return false
PHP在线开发笔记
12-20 9488
之前使用数据提交基本上使用ajax做数据提交，在数据验证的时候，只有通过数据验证之后，才会post/get数据到对应api文件，但是这次涉及图片上传，只能使用form表单提交，但是这前台js判断的时候出现问题。就是在js验证之后，form表单自动提交。 如何防止表单自动提交？ 我先说下onsubmit="return check()"这个是干什么用的，首先是在form标签中有一
javascript onsubmit返回false仍然能提交_关于JavaScript
weixin_42332144的博客
12-26 198
JavaScript（通常缩写为JS）是一种高级的、解释型的编程语言。JavaScript是一门基于原型、函数先行的语言，是一门多范式的语言，它支持面向对象编程，命令式编程，以及函数式编程。它提供语法来操控文本、数组、日期以及正则表达式等，不支持I/O，比如网络、存储和图形等，但这些都可以由它的宿主环境提供支持。它已经由ECMA（欧洲电脑制造商协会）通过ECMAScript实现语言的标准化。它被世...
FORM中使用onSubmit="return false"防止表单自动提交，以及submit和button提交表单的区别...
08-14 343
本文转载于:猿2048网站https://www.mk2048.com/blog/blog.php?id=hhhk0jb&title=FORM%E4%B8%AD%E4%BD%BF%E7%94%A8onSubmit%3D%22return+false%22%E9%98%B2%E6%AD%...
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
10-31
在一个网页表单(form)中，通常我们通过设置不同的提交按钮(submit或button)来实现将数据提交至不同的处理页面。然而，在某些特定情况下，我们可能需要仅使用一个提交按钮(submit或button)来将表单数据同时提交到两个...
onsubmit阻止form表单提交与onclick的相关操作
01-21
1. return 的返回值问题，函数中return一旦有返回值，就不在执行下面的语句，直接跳到函数调用的地方。如下PHP函数代码，第一个if条件符合则函数值返回布尔型false，可以返回一个函数的值,并且跳出这个函数；只要...
JavaScript中return false防止表单提交的问题解析
"JS中`return false`的用法主要涉及事件处理和表单提交的阻止，以及函数执行流程的理解。" 在JavaScript中，`return false`是一个经常用于事件处理函数中的语句，它的作用主要有两个方面：一是阻止默认行为，二是...
表单提交 onsubmit=“return false“
qq_39380155的博客
10-22 1462
最近在做一个老项目（用的还是零几年的技术）的翻新，发现一些刚学jsp时的知识点，不小心忘了，于是做一下笔记~ <form id="mainForm" method="post" name="mainForm" onsubmit="return false;"> <table> <tr> ...
使用onsubmit return false 阻止form表单提交的方法介绍
weixin_30507481的博客
10-29 179
使用 onsubmit=return false 阻止表单提交，要注意以下几点： 1，return 的返回值问题，函数中return一旦有返回值，就不在执行下面的语句，直接跳到函数调用的地方。如下PHP函数代码，第一个if条件符合则函数值返回布尔型false，可以返回一个函数的值,并且跳出这个函数；只要遇到return语句，程序就在那一行代码停止执行，执行控制将立刻返回到调用该程序的代码处。 ...
return false误区onclick|submit=fn(return false)不能阻止默认行为
andyzhaojianhui的专栏
05-08 7686
在大多数情况下,为事件处理函数返回false,可以防止默认的事件行为,众所周知，在表单中加上onsubmit="return false;"可以阻止表单提交。在超链接中加上onclick="return false;"可以阻止打开超链接。  return false 作用 ：          在大多数情况下,为事件处理函数返回false,可以防止默认的事件行为.  众所周知，在表单
js中return false,return,return true的用法及区别
qq_44845659的博客
09-29 3009
js中return false,return,return true的用法及区别 首先return作为返回关键字，他有以下两种返回方式 1.返回控制与函数结果 语法为：return 表达式; 语句结束函数执行，返回调用函数，而且把表达式的值作为函数的结果 2.返回控制无函数结果 语法为：return;在大多数情况下,为事件处理函数返回false,可以防止默认的事件行为.例如,默认情况下点击一个元素,页面会跳转到该元素href属性指定的页. 例如:链接 return false 就相当于终止符，return
html提交表单原理,HTML5之Form 表单理论
weixin_42327291的博客
05-30 631
一、form表单有什么作用？有哪些常用的input 标签，分别有什么作用？表单的作用是搜集用户的输入，用户提交表单时向服务器传输数据，从而实现用户与web服务器的交互。 name：表单提交时的名称action：提交到的地址method：提交方式，get和post(默认是get)input标签根据type属性不同，分以下常用标签：button——定义可点击的按钮checkbox——定义复选框radi...
html表单提交的请求原理,<form></form>表单的提交原理
weixin_35662493的博客
05-30 1752
之前一直在用form表单提交，但一直没有了解它的原理，今天就看了看，希望能帮到大家理解首先先来看一下平时的form表单结构。action后面跟的是路径url，methord是用哪种方式来传递，一般都是get和post两种方式，form表单里面有一些input标签。http是来如何提交表单的呢？我们来看一下1、表单提交时表单内容会被浏览器封装为HTTP请求报，里面包含了所有表单元素的name属性值和...
html中有关于submit的笔记
工作札记
02-13 2670
用input提交，代码如下： &lt;form id="TestForm" name="SelectNav" method="post" action="goto.php"&gt; &lt;input class="shuju" id="TestInput" name="TestInput" type="text" pl
HTML 表单原理
A1656187948的博客
03-18 1906
今天分享一下个人对于表单的理解。简单来讲， HTML 表单就相当于 web 页面的无线电台，使用它可以与服务器形成双向的通信。当你点击了提交按钮后，表单中所填的数据会被打包发送到服务器进行处理，接着服务器会根据表单中的信息返回特定的响 应。在表单中，组成元素大致可以分为两类——输入赋值型和选择赋值型。虽然类型不同，但两类元素最终的结果都是为一个变量赋值。例如，输入赋值型中比较典型的输入框中：<inp
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值