提交表单的4种方式_java自定义表单

提交表单的4种方式_java自定义表单通用提交按钮–>2、提交3、说明:用户提交按钮或图像按钮时,就会提交表单。使用或都可以定义提交按钮,只要将其特性的值设置为“submit”即可,而图像按钮则是通过的type特性值设置为”image”来定义的。因此,只要我们单击一下代码生成的按钮,就可以提交表单。4、阻止表单提交只要在表单中存在上面列出的任何一种按钮,那么相应表单控件拥有焦点的情况下,按回车键就可以提交表单。如果表单里没有提…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

通用提交按钮–>

2、

提交

3、

说明:用户提交按钮或图像按钮时,就会提交表单。使用或都可以定义提交按钮,只要将其特性的值设置为“submit”即可,而图像按钮则是通过的type特性值设置为”image”来定义的。因此,只要我们单击一下代码生成的按钮,就可以提交表单。

4、阻止表单提交

只要在表单中存在上面列出的任何一种按钮,那么相应表单控件拥有焦点的情况下,按回车键就可以提交表单。如果表单里没有提交按钮,按回车键不会提交表单。

以这种方式提交表单时,浏览器会在将请求发送给服务器之前触发submit事件。这样,我们就有机会验证表单数据,并据以决定是否允许表单提交。阻止这个事件的默认行为就可以取消表单提交。例如,下面代码会阻止表单提交:

var EventUtil = {

addHandler: function (element, type, handler) {

if (element.addEventListener) {

element.addEventListener(type, handler, false);

} else if (element.attachEvent) {

element.attachEvent(“on” + type, handler);

} else {

element[“on” + type] = handler;

}

},

getEvent: function (event) {

return event ? event : window.event;

},

preventDefault: function (event) {

if (event.preventDefault) {

event.preventDefault();

} else {

event.returnValue = false;

}

}

};

var form = document.getElementById(“myForm”);

EventUtil.addHandler(form, “submit”, function () {

//取得事件对象

event = EventUtil.getEvent(event);

//阻止默认事件

EventUtil.preventDefault(event);

});

调用preventDefault()方法阻止了表单提交。一般来说,在表单数据无效而不能发送给服务器时,可以使用这一技术。

5、在JavaScript中,以编程方式调用submit()方法也可以提交表单。这种方式无需表单包含提交按钮,任何时候都可以正常提交表单。来看一个例子:

var form = document.getElementById(“myForm”);

//提交表单

form.submit();

在以调用submit()方法的形式提交表单时,不会触发submit事件,因此要记得在调用此方法之前先验证表单数字据。

提交表单时可能出现的最大问题,就是重复提交表单。在第一次提交表单后,如果长时间没有反映,用户可能会变得不耐烦。这时候,他们也许会反复单击提交按钮。结果往往很麻烦(因为服务器要处理重复请求),或者造成错误(如果是下了订单,那么可能会多定好几份)。

解决这一问题的办法有两个:

在第一次提交表单后就禁用提交按钮;     利用onsubmit事件处理程序取消后续的表单提交操作。

posted on 2012-06-06 10:16 japper 阅读(10728) 评论(7)  编辑  收藏 所属分类: Java

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/188224.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • python 内置函数详解

    python 内置函数详解

    2021年7月5日
    79
  • minhash算法_小k

    minhash算法_小k对于web网页去重的应用,如抄袭、镜像等,通过将网页表示为字符k-grams(或者k-shingles)的集合,把网页去重的问题转化为找到这些集合的交集。使用传统的方法存储这些巨大的集合以及计算它们之间的相似性显然是不够的,为此,对集合按某种方式进行压缩,利用压缩后的集合推断原来集合的相似性。 Jaccard相似性:只关注集合之间的交集大小。集合S和T的Jaccard相似性定义如下:

    2022年10月30日
    0
  • 转blog!!

    转blog!!

    2021年4月27日
    139
  • 基于注解式的分布式Elasticsearch的封装

    基于注解式的分布式Elasticsearch的封装原生的RestLevelClient不好用,构建检索等很多重复操作。对bboss-elasticsearch进行了部分增强:通过注解配合实体类进行自动构建索引和自动刷入文档,复杂的业务检索需要自己在xml中写Dsl。用法与mybatis-plus如出一辙。依赖<dependency> <groupId>org.elasticsearch</gr…

    2022年10月25日
    0
  • Laravel-admin之Driver [] is not supported

    Laravel-admin之Driver [] is not supported

    2021年10月30日
    39
  • 联想st510开卡软件_固态硬盘修复(慧荣sm2246XT主控开卡教程)

    联想st510开卡软件_固态硬盘修复(慧荣sm2246XT主控开卡教程)本帖最后由lwj2996868501于2019-3-2513:12编辑此教程仅适用于固态硬盘且主控SM2246XT的,不是这个主控的就没必要看下去了!准备工具:起子,镊子(铁丝也行),坏固态硬盘,sata转USB转接卡(硬盘盒也可以),慧荣sm2246XT开卡工具(此帖子只提供一个版本的工具,其他版本自行网上下载,这个主控开卡工具版本很多具体用什么版本网上找就找得到界面都是一样的。不用一…

    2022年4月27日
    493

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号