form submit提交的几种方法
最近研究了下html中,form保单提交的几种方法,现与大家分享一下(注:网上可能已经有好多版本了,这里自己写下来做个总结了,哈!):
方法一:利用form的onsubmit()函数(经常使用)
![](http://suo.iteye.com/images/icon_star.png)
- <script type="text/javascript">
- function validateForm(){
- if(document.reply.title.value == ""){ //通过form名来获取form
- alert("please input the title!");
- document.reply.title.focus();
- return false;
- }
- if(document.forms[0].cont.value == ""){ //通过forms数组获取form
- alert("please input the content!");
- document.reply.cont.focus();
- return false;
- }
- return true;
- }
- <form name="reply" method="post" onsubmit="return validateForm( );">
- <input type="text" name="title" size="80" /><br />
- <textarea name="cont" cols="80" rows="12"></textarea><br />
- <input type="submit" value="提交" >
- </form>
- 注意:
- 1.onsubmit属性内容一定要有return关键字,否则函数会直接执行,不会返回
- 2.validateForm一定要返回一个boolean类型的返回值
- 3.提交按钮要写成submit类型的
方法二:利用input类型为submit组件的onclick()函数
1.将上面form标签中的οnsubmit="return validateForm()"属性,去掉。
2.为“提交”按钮添加onclick事件,如下:
<input type="submit" value="提交" οnclick="return validateForm();">
方法三:利用button组件的onclick()函数,手动提交
![](http://suo.iteye.com/images/icon_star.png)
- <script type="text/javascript">
- function modifyItem() {
- if (trim(document.getElementById("itemName").value) == "") {
- alert("物料名称不能为空!");
- document.getElementById("itemName").focus();
- return;
- }
- with (document.getElementById("itemForm")) {
- method = "post";
- action = "item.do?command=modify&pageNo=${itemForm.pageNo}";
- submit();
- }
- }
- //返回
- function goBack() {
- window.self.location = "item.do?command=list&pageNo=${itemForm.pageNo}";
- }
- </script>
- <form name="itemForm" id="itemForm">
- <input name="itemNo" type="text" id="itemNo" value="${ item.itemNo }" >
- <input name="itemName" type="text" id="itemName" value="${ item.itemName }" >
- <input name="btnModify" type="button" id="btnModify" value=“修改" onclick="modifyItem()">
- </form>
- 注意:
- 1.提交时,设置form的action和methods属性,然后利用form.submit()函数提交。
总结:
1.对form中的组件验证时,前两个使用的是name属性,包括form自身的。
2.如果提交表单时没有反应,同时确定提交表单部分代码没有问题,请查看提交表单前面的js代码,有时前面js的错误会引发莫名其妙的问题。
form submit提交的几种方法相关推荐
- form提交的几种方法
最近研究了下html中,form保单提交的几种方法,现与大家分享一下(注:网上可能已经有好多版本了,这里自己写下来做个总结了,哈!): 方法一:利用form的onsubmit()函数(经常使用) &l ...
- 使用js提交form表单的两种方法
提交form表单的时候瑶族一些简单的验证,验证完后才能提交,避免无效提交. 1.当输入用户名和密码为空的时候,需要判断.这时候就用到了校验用户名和密码,这个需要在前端页面写:有两种方法,一种是用sub ...
- js提交form表单的两种方法
当输入用户名和密码为空的时候,需要判断.这时候就用到了校验用户名和密码,这个需要在前端页面写:有两种方法,一种是用submit提交.一种是用button提交. 方法一: 在jsp的前端页面的头部插入一 ...
- html表单调用js方法,使用js提交form表单的两种方法
提交form表单的时候瑶族一些简单的验证,验证完后才能提交,避免无效提交. 1.当输入用户名和密码为空的时候,需要判断.这时候就用到了校验用户名和密码,这个需要在前端页面写:有两种方法,一种是用sub ...
- Web应用中避免Form重复提交的三种方案
Web应用中避免Form重复提交的三种方案 2007-08-21 18:29 Web应用中重复提交的问题的三种解决方案 前两种是利用javascript,后面一种是在使用Struts的情况下的参考实现 ...
- php ajax jquery 表单重复提交,jQuery的 $.ajax防止重复提交的两种方法(推荐)
下面给大家带来两种关于jquery 的ajax防止重复提交的解决方法,具体介绍如下所示: 1.第一种,对于onclick事件触发的的ajax 可以采用如下方法: 即在beforeSend中使点击按钮不 ...
- java mysql防重复提交_防止数据重复提交的6种方法(超简单)!
有位朋友,某天突然问磊哥:在 Java 中,防止重复提交最简单的方案是什么? 这句话中包含了两个关键信息,第一:防止重复提交:第二:最简单. 于是磊哥问他,是单机环境还是分布式环境? 得到的反馈是单机 ...
- getclass方法_防止数据重复提交的6种方法(超简单)!
有位朋友,某天突然问磊哥:在 Java 中,防止重复提交最简单的方案是什么? 这句话中包含了两个关键信息,第一:防止重复提交:第二:最简单. 于是磊哥问他,是单机环境还是分布式环境? 得到的反馈是单机 ...
- jQuery的 $.ajax防止重复提交的两种方法(推荐)
本文给大家分享两种jquery 的ajax防止重复提交的方法,第一种方法对于onclick事件触发的ajax,在beforeSend中使点击按钮不可用,ajax结果返回后置为可用,第二种利用jquer ...
最新文章
- 第三周 数据分析之概要 Pandas库入门
- linux指令popd,Linux切换目录pushd、popd、dirs命令
- 蓝桥杯 十进制数转八进制数
- C++中的继承(二)
- C Primer+Plus(十七)高级数据表示 编程练习(二)
- CentOS 6.4 编译安装 gcc-4.8.0
- 超详细前端开发案例:品优购商场项目(二)
- C++ struct和class的区别
- cdn厂商 同兴万点_CDN进入牌照时代 工信部规范和清理CDN市场
- linux开源开发板 软硬件资料,LeMaker Guitar开源开发板安装系统镜像、Linux 系统快速指南 | 乐美客开源开发板社区...
- 跟公司妹子交流了一下
- et文件怎么转成excel_10秒就能将任意格式的文件转成PDF,简单易操作,不学可别后悔...
- 定义一个list对象数组 java_javascript定义一个list
- 众多mock工具,这一次我选对了
- 谁将烟焚散,散了纵横的牵绊
- zabbix代理服务器配置
- 第十六周模测——ZJM要抵御宇宙射线
- Tekton笔记(四)之Authentication及catalog skopeo
- linux 安卓签名,Android中的签名验证(1)
- jquery实现新闻消息滚动
热门文章
- linux 内核 sscanf,原来sscanf函数可以这么强大
- C#上位机的USB通信与串口通信接口区别
- Rokid ALL in ONE 全栈开发套件开箱——强人工智能入门指南[1]
- 真皮商务笔记本【无忧币礼品】
- 操作系统期末总复习(2)——问答题【常考15道】
- Cortex-M55的单片机AI技术Helium权威指南电子书发布(2020-09-08)
- 单服务器部署CTFd+whale踩坑
- Storm之分布式搭建
- Kotlin 开发Android app(四):Kotlin 四大容器Set,Array,List,Map
- c语言中stray‘\243‘in program