`

(转)结:FORM中使用onSubmit="return false"防止表单自动提交,以及submit和button提交表单的区别

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

后来在form 中添加:onsubmit="return false;"问题终于解决。

<form name="frm" method="post" onsubmit="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" onclick="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" onclick="exec1('http://www.google.com')"/> 
</form> 
<form name='frm1' action="http://www.hao123.com"> 
    <input type="text" name= "userName"/> 
</form> 

</body> 
</html> 

总结期间找了些关于onsubmit="return false;"的文章,作为资料也贴在下边。

URL:http://bbsanwei.iteye.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> 
分享到:
评论
1 楼 像风一样拘束 2014-05-21  

相关推荐

    【JavaScript源代码】HTML form表单提交方法案例详解.docx

    对于`&lt;button&gt;`,因为其不具有自动提交功能,所以需要在JavaScript中手动调用`submit()`方法来提交表单。 3. **表单级事件处理**:使用`onsubmit`事件处理函数,可以为整个表单添加验证逻辑。当表单被提交时,`...

    页面提交submit的几种方法

    这里的`stat()`函数用于验证表单中的开始时间和结束时间是否符合要求,如果验证通过,则通过调用`document.form1.submit()`来提交表单。 #### 方法二:使用`&lt;input type="submit"&gt;`实现表单提交 `&lt;input type=...

    onsubmit阻止form表单提交与onclick的相关操作

    需要注意的是,如果表单提交是通过一个普通按钮(`&lt;input type="button"&gt;`)的`onclick`事件中调用`form.submit()`,那么`onsubmit`事件不会自动触发,需要手动调用。 示例: ```html &lt;form action="index.jsp" ...

    在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码

    在一个网页表单(form)中,通常我们通过设置不同的提交按钮(submit或button)来实现将数据提交至不同的处理页面。然而,在某些特定情况下,我们可能需要仅使用一个提交按钮(submit或button)来将表单数据同时提交到两个...

    js提交表单及js表单验证

    本文将详细解释如何使用JavaScript进行表单提交以及表单验证,并通过具体的示例代码来展示各种常见验证方法。 #### 一、基本概念 表单验证是指在用户提交表单前对用户输入的数据进行检查的过程,以确保数据的有效...

    js中return false(阻止)的用法.docx

    这时可以在表单的`onsubmit`事件中使用`return false`来阻止表单的默认提交行为。 ```javascript function chkInput(form) { if (form.title.value === "") { alert("请输入文章标题!"); form.title.select(); ...

    php防止form重复提交的方法

    使用JavaScript可以有效地防止用户在提交表单后因刷新页面而再次提交。一种方式是在提交按钮的`onClick`事件中,将按钮禁用并改变其值,让用户知道提交正在进行,例如: ```html &lt;input name="cont" value="提交...

    JavaScript event(事件) 字符串长度控制及Form表单提交控制

    在本主题中,我们将深入探讨JavaScript中的事件、字符串长度控制以及如何对Form表单进行提交控制。 首先,我们来讨论JavaScript事件。事件是用户与网页进行交互时产生的动作,比如点击按钮、滚动页面或填写表单。...

    js中return false(阻止)的用法

    总结来说,`return false`在JavaScript中是一个用于取消事件默认行为的快捷方式,尤其是在处理表单提交和其他需要阻止默认动作的事件时非常有用。它通常出现在表单的`onsubmit`事件处理程序中,或者直接作为事件监听...

    jsp表单验证汇总

    &lt;form id="form1" name="form1" method="post" action="" onsubmit="return checkform(this)"&gt; &lt;input type="radio" name="oo" value="radiobutton" /&gt; &lt;input type="radio" name="oo" value="radiobutton" /&gt; ...

    表单与javascript

    &lt;FORM name="form1" onSubmit="return validateform()" method="post" action="button.html" &gt; 名字: &lt;INPUT TYPE="text" id="txtName" NAME="txtName" size=10 onBlur="validateName();"&gt; 密码: &lt;INPUT TYPE=...

    友情链接表单发送(HTML经典用例)

    标题“友情链接表单发送(HTML经典用例)”指的是在网页设计中创建一个用于用户提交友情链接申请的表单。...在实际的网页开发中,还可以结合CSS来美化表单,以及使用更复杂的JavaScript验证功能以提高用户体验。

    java 常用开发代码

    通过这些技术,开发者可以在Java Web应用程序中创建丰富的用户交互体验,包括警告、确认、页面导航以及表单提交等。这些方法结合了JSP和JavaScript的优势,提供了在服务器端和客户端之间的灵活控制。

    form_login 表单验证 客户端验证

    在Java Web开发中,表单验证是不可或缺的一部分,它确保用户输入的数据符合应用程序的要求和预期。本教程将探讨"form_login"表单验证,重点在于客户端验证,这通常涉及到JavaScript和HTML。结合博客中的相关总结,...

    js验证表单大全,用JS控制表单提交 ,javascript提交表单

    根据给定的文件标题、描述、标签以及部分内容,本文将深入解析JavaScript在表单验证中的应用,涵盖多种常见且实用的验证方法。JavaScript是前端开发中不可或缺的一部分,它能够实现动态网页效果,尤其是在用户交互...

    js验证表单 js验证表单

    event.returnvalue=false; } &lt;input onkeydown="onlyEng();"&gt; 4. 只能是数字 &lt;script language=javascript&gt; function onlyNum() { if(!((event.keyCode&gt;=48&&event.keyCode&lt;=57)||(event.keyCode&gt;=96&&event....

    react-Formik一种简单优雅的方式来处理React中的表单

    - **状态管理**: Formik自动管理表单的初始值、脏值检测、错误信息和提交状态。 - **验证**: 提供了自定义验证函数,可以在字段变更时实时验证输入。 - **表单提交**: 简化了表单提交过程,包括处理提交事件、调用...

    通用的JS表单验证

    在IT行业中,JavaScript是一种广泛使用的客户端脚本语言,特别是在网页交互和表单验证方面。"通用的JS表单验证"这个主题聚焦于如何利用JavaScript来确保用户在网页表单中输入的数据符合预设的规则,从而提高数据质量...

    react-reactreduxform利用Redux轻松在React中创建表单

    在React开发中,表单处理通常是一个相对复杂的任务,因为它涉及到状态管理、用户输入验证以及数据提交等。Redux作为一个强大的状态管理库,可以为React应用提供一个统一的、可预测的状态容器。`react-redux-form`库...

Global site tag (gtag.js) - Google Analytics