提交表单的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)
上一篇 2026年4月17日 上午10:43
下一篇 2026年4月17日 上午10:49


相关推荐

  • Centos7中单节点openshift_3.11安装及配置开机自启

    Centos7中单节点openshift_3.11安装及配置开机自启

    2021年5月30日
    144
  • 状态模式state_迭代器模式

    状态模式state_迭代器模式状态模式 State动机模式定义实例结构要点总结笔记动机在软件构建过程中,某些对象的状态如果改变,其行为也会随之而发生变化,比如文档处于只读状态,其支持的行为和读写状态支持的行为就可能不同.如何在运行时根据对象的状态来透明地更改对象的行为?而不会为对象操作和状态转换之间引入紧耦合模式定义允许一个对象在其内部状态改变时改变它的行为.从而使对象看起来似乎修改了其行为.从而使对象看起来似乎修改了其行为.从而使对象看起来似乎修改了其行为.实例朴素根据状态来执行下一步enum NetworkStat

    2022年8月11日
    4
  • linux编译so库「建议收藏」

    linux编译so库「建议收藏」一、动态库so的编译以一个例子来说明。这里有三个so_test.h,test_a.c,test_b.c#ifndef_SO_TEST_H_#define_SO_TEST_H_voidtest_a();voidtest_b();voidtest_c();#endif /*_SO_TEST_H_*/#include#include”so_test.h”

    2022年6月29日
    60
  • POJ 2142 The Balance(扩展欧几里德解方程)

    POJ 2142 The Balance(扩展欧几里德解方程)

    2021年8月18日
    60
  • django urls_url主要功能

    django urls_url主要功能前言为什么我们url需要命名呢?url命名的作用是什么?我们先来看一个案例案例我们先在一个Django项目中,创建2个App,前台front和后台cms,然后在各自app下创建urls.py文件

    2022年7月31日
    11
  • pycharm远程调试python_pycharm调试教程

    pycharm远程调试python_pycharm调试教程pycharm远程开发与调试0.为pycharm添加远程服务器配置如果你已经为该服务器配置过远程服务器,可忽略此步骤。打开pycharm,tools->Deployment->Configuration,在左边栏点“+“号添加远程服务器。右边配置如下图,只需要配置connection,注意”Visibleonlyforthisproject”的勾去掉!…

    2022年8月29日
    10

发表回复

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

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