`
peiwisdom
  • 浏览: 21572 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

JSP FORM 提交

JSPIE百度GoogleITeye 
阅读更多
文章来源 ：http://jerry8023.iteye.com/blog/518487

2009-11-16
总结：FORM中使用onSubmit="return false"防止表单自动提交，以及submit和button提交表单的区别
最近被form的自动提交烦的不行，网上搜了一些资料，下面这篇文章总结的非常全，基本好多我之前也都试过了（就差总结了^=^）。呵呵，有网友总结的这么全，就直接拿来了：）

在页面中有多个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> 

分享到：
| toad
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JSP避免Form重复提交的三种方案

    在Web开发中，尤其是使用JavaServer Pages (JSP)时，Form表单的重复提交问题是一个常见的挑战。这可能导致数据不一致性和服务器资源的浪费。本文将探讨三种防止JSP表单重复提交的方法。 首先，我们可以使用...

    jsp页面js调用form表单的值的方法

    ### JSP 页面中 JS 调用 Form 表单的值的方法 在 Web 开发中，JSP（Java Server Pages）是一种广泛使用的服务器端技术，它允许开发者将动态内容嵌入到静态 HTML 页面中。本篇文章主要介绍如何在 JSP 页面中通过 ...

    一个Jsp两个ActionForm分别提交.rar

    一个Jsp两个ActionForm分别提交.rar一个Jsp两个ActionForm分别提交.rar一个Jsp两个ActionForm分别提交.rar一个Jsp两个ActionForm分别提交.rar一个Jsp两个ActionForm分别提交.rar

    jsp+servlet做的form表单元素的提交

    本主题将深入探讨如何利用JSP和Servlet处理表单(form)元素的提交，以及在后台进行数据处理后再将结果显示出来。 首先，JSP是一种视图技术，它允许开发者在HTML页面中嵌入Java代码，用于生成动态内容。表单是HTML中...

    一个jsp页面中多个提交按钮提交不同的页面.zip

    在JavaServer Pages (JSP) 技术中，创建一个包含多个提交按钮的页面是常见的需求，每个按钮可能对应不同的处理逻辑，比如提交到不同的后端Servlet或执行不同的操作。本示例着重讲解如何在JSP页面中实现多个提交按钮...

    jsp form表单方法示例

    1.代码： 代码如下: &lt;&#37;– Document : index Created on : 2009-10-4, 13:56:46 Author : lucifer –%&gt; &lt;!DOCTYPE HTML PUBLIC “-//W3C//DTD ... &lt;head&gt; &lt;title&gt;... [removed] function giveFocus

    解决jsp提交乱码的问题

    ### 解决JSP提交乱码的问题 在进行Web开发时，经常会遇到中文字符编码的问题，尤其是在使用JavaServer Pages（JSP）技术时。本篇文章将详细介绍如何解决JSP页面提交时出现的乱码问题，包括GET请求和POST请求两种...

    教学视频--JSP提交form乱码问题解决演示.rar

    教学视频--JSP提交form乱码问题解决演示.rar

    jsp中在提交表单时的中文处理问题

    2. 请求编码转换：JSP的`&lt;form&gt;`标签有一个`accept-charset`属性，可以用来指定表单提交时的数据编码。例如： ```html &lt;form action="submit.jsp" method="post" accept-charset="UTF-8"&gt; ``` 这将告诉浏览器以...

    JSP实现文件上传与下载.pdf

    acceptFile.jsp文件中，使用FORM标签来上传文件，使用INPUT控件来选择要上传的文件。acceptFile.jsp文件将上传的文件保存到服务器的文件系统中。 三、JSP文件下载的实现 在示例代码中，使用了自定义的UpFile.tag...

    JSP避免Form重复提交的三种方案.docx

    在JSP开发中，防止表单（Form）重复提交是一个重要的问题，因为它可能导致数据的冗余或不一致性。以下是对避免Form重复提交的三种常见方案的详细解释： 1. JavaScript控制提交： 这种方法通过JavaScript在客户端...

    JSP_重复提交_解决方法

    ### JSP重复提交问题及其解决方法 #### 一、引言 在Web应用程序开发中，尤其是在使用Java Server Pages (JSP)技术时，一个常见的问题是重复提交数据。当用户不小心刷新了页面或按下了浏览器的“后退”按钮时，可能...

    ajax提交form表单和上传图片

    本教程将详细讲解如何利用jQuery、jQuery Form插件以及Spring MVC框架来实现Ajax提交表单并上传图片。通过这种方式，用户无需等待页面刷新，即可完成操作，提升了交互性。 首先，`jquery.js` 是jQuery库的核心文件...

    jsp 简单点表单练习

    这是一个很简单的表单练习。都是些最基本的东西，不过应该挺有用 的。希望对大家有用。

    一个Form数据拆分到不同的jsp中

    标题中的“一个Form数据拆分到不同的jsp中”是指在Web开发中，如何将一个大型的表单（Form）逻辑拆分成多个独立的JavaServer Pages（JSP）文件，以便更好地管理和维护页面结构。这种做法有助于提高代码的可读性和可...

    jsp表单和图片一起上传

    在Java Web开发中，JSP（JavaServer Pages）是一种用于创建动态网页的技术。当你需要在网页上实现用户信息提交和图片上传功能时，通常会结合HTML表单和Servlet来处理。"jsp表单和图片一起上传"这个话题，就是关于...

    用image来提交form不想使用button提交form.docx

    &lt;form id="formtest" action="formtest.jsp" method="post"&gt; &lt;!-- 表单内容 --&gt; &lt;img id="submitBtn" src="submit_button.png" alt="Submit" onclick="submitForm();"&gt; &lt;/form&gt; function submitForm() { ...

Magicbox
Global site tag (gtag.js) - Google Analytics