html——form表单提交方法submit和button
form表单提交方法
1、type=“submit”
<form name="form" method="post" action="#"><input type="submit" name="submit" value="提交">
</form>
2、type=“image”
<form name="form" method="post" action="#"> <input type="image" name="submit" src="btnSubmit.jpg">
</form>
3、使用链接来提交表单,javascript的DOM模型:
<form name="form" method="post" action="#"> <a href="javascript:form.submit();">提交</a>
</form>
这种方法实际上是调用了一个javascript函数,使用javacript函数来提交表单,方法就非常多非常灵活了,比如可以把它加入到任意一个标签的onclick事件中:
<form name="form" method="post" action="#"> <div onclick="javascript:form.submit();"> <span>提交</span> </div>
</form>
但是,如果一个表单里有需要有多个提交按钮怎么办呢?
比如一个表单里的提交按钮所指向的处理页面不同,这样由于表单在定义的时候就已经确定下表单数据的处理页面,所以单纯地在表单里放多个提交按钮是没有办法达到目的的。这就需要javascript。
首先定义一个函数:
代码如下:
<script language=javascript> function query(){ form.action="query.jsp"; form.submit();} function update(){ form.action="update.jsp"; form.submit();}
</script>
通过javascript改变form的action属性值,这样就可以实现多提交按钮而且功能不同了,页面内代码如下:
<form name="form" method="post" action="#"> <input type="button" name="query" onclick="query();" value="查询"> <input type="button" name="update" onclick="update();" value="更新">
</form>
上面一段代码,使用的是普通的按钮,而提交功能的实现方法是在它的onclick事件中调用javascript函数.
有了上面这几种提交表单的方法,我想差不多够应付复杂的表单了.
表单提交值得注意的地方
注意:每个input标签都要有name属性,form要有action和method。
当然,这里也可以使用button代替input作为提交的按钮:
button的type属性有两个值:button和submit。当不写type属性时,其type的默认值是submit,点击的话也会直接提交数据。
使用form的onsubmit()方法对表单数据进行 验证后 再提交
<form id="form1" action="/test" method="post" onsubmit="return checkForm()"><input type="submit" value="提交">
//或者
<button type="submit">提交</button><script type="text/javascript">function checkForm(){var user= document.getElementById('user').value;var psw= document.getElementById('psd').value;if (...) {//如果验证不通过return false;} else {//验证通过return true;}}
</script>
这里给form元素加上了onsubmit()方法,它会在“提交”按钮点击的时候被触发,该方法一定要有return返回值,如果值为false则不进行提交,如果为true则提交。
给input type='button’添加onclick事件,验证通过则调用submit()方法提交
<form id="form1" action="/test" method="post"><input type="button" value="提交" onclick="checkForm();">
</form>
function checkForm(){ var user= document.getElementById('user').value;var psw= document.getElementById('psd').value; if(...){ //验证不通过 return false; } document.getElementById("form1").submit();
}
使用ajax对数据进行 验证后 再提交
<form id="form1" action="/test" method="post">
<input type="submit" value="提交" onclick="login()">
//或者
<button type="button" onclick="login()">提交</button>
<script type="text/javascript">function login() {$.ajax({type: "POST", dataType: "json", url: "/users/login" , data: $('#form1').serialize(), //提交的数据success: function (result) {console.log(result); //打印服务端返回的数据(调试用)if (result.resultCode == 200) {alert("提交成功");};},error : function() {alert("提交失败");}});}
</script>
注意:
如果使用button,要先进行数据验证的话,就必须要将type的值设置为”button”,即表示它是一个按钮
这里提交的数据’data’,使用了serialize()方法将提交的表单值序列化(即a=1&b=2格式),当然你也可以写成:
{"username":username,"password":password
}
表单的 input、select 默认的样式是不同的,所以就造成了width设置的一样,但就是对不齐,可以设置box-sizing:border-box;
来解决不一致问题。
我做的项目真实代码如下:
@RequestMapping(value = "/declareNewStartBackup")public ModelAndView declareNewStartBackup(String alternativeType, Long id, HttpServletRequest requestServlet) {LoginUser user = getLoginUser(requestServlet);ModelAndView md = new ModelAndView();BRePro brePro = new BRePro();if (id != null && id == -1) {brePro.setRespoMan(user.getAccountid()); // 责任人brePro.setRespoUnit(user.getOrgid().toString()); // 责任单位if (user != null && user.getEmp() != null && user.getEmp().getMobilephone() != null) {brePro.setRespoTel(user.getEmp().getMobilephone());}brePro.setAlternativeType(alternativeType);//新申报或者延续项目brePro.setProType(SysContent.proTtype1);} else {brePro = breproService.findBRePro(id);}md.addObject("brePro", JSON.toJSONString(brePro));md.addObject("alternativeType", alternativeType);if("1".equals(alternativeType)) {md.setViewName("biz/study/declare/declareNewStartBackup");}else if("2".equals(alternativeType)) {md.setViewName("biz/study/declare/declareNewStartBackupContinue");}return md;}
alternativeType:为新增页面默认的参数
brePro:jpa 对应的实体类
md.setViewName(“biz/study/declare/declareNewStartBackup”); 新增页面跳转的地址
<div class="main"><form id="form" enctype="multipart/form-data" action="${ctx}/BRePro/saveBRePro" method="post"> <input type="hidden" name="proId" ><input type="hidden" name="alternativeType">...
var form = document.getElementById('form');var data='${brePro}';$(function () {data =JSON.parse(data);$("#form").form("load", data);});//表单保存function submitForm(){if($("#proName").val() && $("#proName").val().trim()!=''){form.submit();}else {alertInfo('请填写项目名称!');}}
上面代码是对应的新增页面js
总结
表单具有默认的提交行为,默认是同步的,同步表单提交,浏览器会锁死(转圈儿)等待服务端的响应结果。
表单的同步提交之后,无论服务端响应的是什么,都会直接把响应的结果覆盖掉当前页面
后来有人想到了一种办法,来解决这个问题,那边是服务端重定向(服务端重定向针对异步请求无效)
消除自动填充:通过添加readonly&onfocus =“this.removeAttribute('readonly');
解决了这个问题。
<input type="password" name="Password" autocomplete="off" readonly onfocus="this.removeAttribute('readonly');" >
html——form表单提交方法submit和button相关推荐
- Form表单提交方法method
method="get",表单在提交时,填写在表单中的数据会和action="url"中的url编码在一起. method="post",表 ...
- python中前后端通信方法Ajax和ORM映射(form表单提交)
后端从数据库获取数据给到前端: 第一种方式: admin.py文件代码: @admin.route('/showList') def show():# 获取数据库所有文章数据,得到一个个对象res=A ...
- 关于form表单提交时的坑,submit,submit,submit
关于form表单提交时的坑,submit,submit,submit 说是坑,也是自己的用前端的经验不足,被form表单困扰了一下午.其实当把问题解决后,有一种"TMD竟然是这样,想抽死自己 ...
- layui删除后刷新表格_layui form表单提交之后重新加载数据表格的方法
如下图,在我们做高级查询的时候需要重新加载数据表格table.reload(); HTML form表单 菜单: JS $(function () { //注意:这里是数据表格的加载数据,必须写 ...
- php ajax form表单提交,Ajax方法实现Form表单提交的方法
这次给大家带来Ajax方法实现Form表单提交的方法,Ajax方法实现Form表单提交的注意事项有哪些,下面就是实战案例,一起来看一下. 写在前面的话 在使用form表单的时候,一旦点击提交触发sub ...
- html form提交前验证,form表单提交前验证实现方法
form表单提交前验证实现方法2017-11-26 20:54 form表单提交是网站中最常见的,基本上所有的网站都会用到. 除非你就一些静态网页,仅仅是展示,而不需要互动,所以不需要提交表单. 但是 ...
- vue 添加完数据后刷新页面_vue form 表单提交后刷新页面的方法
最近做的项目中,有增删改表格功能,在操作后需要实时更新页面数据.下面可以这样解决. 1.在methods中 定义好一个初始化渲染实例. 例如 lnitializationData(){//初始化页面数 ...
- java ajax提交form表单提交_form表单AJAX提交(四种方法)
一.AJAX的 form表单提交 1.第一种: 序列化提交$('#form').serialize() 前台: $.ajax({ url: "", type: "post ...
- Form表单提交按钮图片IE6下背景透明(js提交)
Form表单提交按钮图片IE6下背景透明(js提交) 我们知道 光png图片在IE6下面透明方法很多,网上也很多,但是我今天遇到了个难题:form表单提交按钮png图片要求背景透明.我弄了半天,转个思 ...
- ajax form表单提交_LayUI提交表单,监听select,分页组件
1.LayUI提交表单 这几天做项目,用到提交layui框架的弹出层的表单,因为需要在提交表单后,关闭当前弹出层,同时刷新父窗口的数据,因此,用普通的提交就不行了,因为普通的提交到后台之后没有返回值, ...
最新文章
- .net导出Excel
- Sersync实现触发式文件同步
- oracle 求时间差年,Oracle计算时间差常用函数
- Bootstrap组件_路径导航,标签,徽章
- java 集合(Set接口)
- fullcalendar 显示的时间间隔只有四十五分钟_【体能新视点】——女子篮球运动员比赛期间的心率、血乳酸浓度和时间运动分析...
- java中类型转换的造型_Java总结篇系列:类型转换/造型
- 欧盟批准ATT收购时代华纳 或年底前完成交易
- android音乐播放器进度条误差研究
- 基于人脸识别的课堂签到管理系统(四)---摄像头上传实时数据,百度AI读取并返回信息以及多线程操作
- 【Selenium2】【HTMLTestRunner】
- Linux内核中的信号量解析
- 用java实现抽奖概率算法
- robot framework 添加selenium2library显示红色
- AirPlay掉帧、卡顿解决方法
- 分子动力学理论部分总结(未整理完)
- Twitter群推王:推特全方位营销利器
- Python中 os.sep 的作用
- 【2020.10.17 牛客 普及组 模拟赛一】T2 牛牛的跳跳棋
- 苹果手机代数_iPhone所有型号上市顺序
热门文章
- 云端卫士实战录 React + Redux 前端项目实践
- 操作系统—PV操作解决和尚打水问题
- 设置共享文件夹在主机与本地VMware虚拟机之间传输文件
- Predicting drug–disease associations through layer attention graph convolutional network 论文解析
- map集合用于存储信息(映射关系)
- 解决 无法删除文件夹 “文件夹访问被拒绝 你需要权限来执行此操作“ 的问题 理论上还可以使用本方法删除任何文件夹
- ac6005直连ap 如何配置_邀请实测搭档 完成AC+瘦AP经典组网_华为 AC6005_网络设备-中关村在线...
- Chrome调试工具使用及waterfall含义详解
- 使用gitbook时graceful-fs报错:TypeError: cb.apply is not a function的解决方案
- SAT数学解题方法总结