form表单提交的方法
最近研究了下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" οnsubmit="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=“修改" οnclick="modifyItem()">
- </form>
- 注意:
- 1.提交时,设置form的action和methods属性,然后利用form.submit()函数提交。
总结:
1.对form中的组件验证时,前两个使用的是name属性,包括form自身的。
2.如果提交表单时没有反应,同时确定提交表单部分代码没有问题,请查看提交表单前面的js代码,有时前面js的错误会引发莫名其妙的问题。
转载于:https://www.cnblogs.com/blogofwyl/p/4274921.html
form表单提交的方法相关推荐
- php ajax form表单提交,Ajax方法实现Form表单提交的方法
这次给大家带来Ajax方法实现Form表单提交的方法,Ajax方法实现Form表单提交的注意事项有哪些,下面就是实战案例,一起来看一下. 写在前面的话 在使用form表单的时候,一旦点击提交触发sub ...
- form 表单提交时用ajax异步请求导致ajax请求结果无法接收问题
1.背景描述,有个公司内部用的小系统,不想大动干戈用太多前端框架,就用HTML5写了个登陆页面,刚开始想着用form表单提交登陆账户信息.后来因为前后端分离,并且统一用ajax调用后台服务交互数据,因 ...
- html form提交前验证,form表单提交前验证实现方法
form表单提交前验证实现方法2017-11-26 20:54 form表单提交是网站中最常见的,基本上所有的网站都会用到. 除非你就一些静态网页,仅仅是展示,而不需要互动,所以不需要提交表单. 但是 ...
- vue 添加完数据后刷新页面_vue form 表单提交后刷新页面的方法
最近做的项目中,有增删改表格功能,在操作后需要实时更新页面数据.下面可以这样解决. 1.在methods中 定义好一个初始化渲染实例. 例如 lnitializationData(){//初始化页面数 ...
- python中前后端通信方法Ajax和ORM映射(form表单提交)
后端从数据库获取数据给到前端: 第一种方式: admin.py文件代码: @admin.route('/showList') def show():# 获取数据库所有文章数据,得到一个个对象res=A ...
- layui删除后刷新表格_layui form表单提交之后重新加载数据表格的方法
如下图,在我们做高级查询的时候需要重新加载数据表格table.reload(); HTML form表单 菜单: JS $(function () { //注意:这里是数据表格的加载数据,必须写 ...
- java ajax提交form表单提交_form表单AJAX提交(四种方法)
一.AJAX的 form表单提交 1.第一种: 序列化提交$('#form').serialize() 前台: $.ajax({ url: "", type: "post ...
- form表单提交踩坑记
2019独角兽企业重金招聘Python工程师标准>>> 今天收获了一次集团故障,心塞不已,究其原因,是form表单提交时web服务器对大小做了限制.这个必现的问题在测试阶段也不知为啥 ...
- Form表单提交按钮图片IE6下背景透明(js提交)
Form表单提交按钮图片IE6下背景透明(js提交) 我们知道 光png图片在IE6下面透明方法很多,网上也很多,但是我今天遇到了个难题:form表单提交按钮png图片要求背景透明.我弄了半天,转个思 ...
- form表单提交数据编码方式和tomcat接受数据解码方式
2019独角兽企业重金招聘Python工程师标准>>> 简单介绍乱码和http请求 1) 乱码问题是web开发过程中经常遇到的问题,主要原因就是URL中使用了非ASCII码造成服务 ...
最新文章
- jQuery 事件对象的属性
- Python基础day01【软件安装、变量的定义和使用、数据类型、标识符和关键字、输入输出、数据类型转换、运算符、PEP 8 规范】
- Xcode6的新特性、iPhone6和iPhone6Plus的适配,xcode6iphone6
- mysql int()_简单谈谈MySQL中的int(m)
- Atcoder Grand Contest 010 B - Boxes 差分
- Python操作MySQL(二) ORM篇
- 想测一下接口的并发数?手把手教你!
- 天地图矢量数据下载_关于离线地图数据的下载、更新以及删除的方法
- uni-app上自定义微信小程序的tabbar
- 黑苹果(Hackintosh)简单步骤教程
- clip studio paint插件开发之介绍
- 矩阵中的旋转(Rotation)
- 百度网盘网页版倍速播放
- Chrome浏览器如何设置中文翻译
- zram lz4 和 lzo 算法性能评估比较
- 由浅入深:3D打印技术我们从电影开始谈
- 解决导入网关gateway依赖爆红
- q创建群聊显示服务器繁忙是什么意思,一种堵车时聊天群的建立方法及系统
- html设置图片切割,JavaScript html js图片切割系统
- 【Qt】main.cpp:1:24: fatal error: QApplication: No such file or directory