JavaScript在form表单中使用button按钮实现submit提交方法


Posted in Javascript onJanuary 23, 2017

submit是button的一个特例,也是button的一种,它把提交这个动作自动集成了,submit和button,二者都以按钮的形式展现,看起来都是按钮,所不同的是type属性和处发响应的事件上。

 在form表单提交中,使用button来间接完成submit的提交更为灵活。下面是实现方法:

使用button按钮实现submit提交,需要在button标签中的使用onclick方法,然后在JavaScript中实现具体,代码如下:

<head>
<script type="text/javascript">
function submitBtnClick(){
document.fileForm.submit();
}
</script>
</head>
<body>
<form action="../welcome.jsp" name="fileForm">
<input type="file" value="请选择图像">
<button id="submitBtn" onclick="submitBtnClick()">检索</button>
</form>
</body>

上文代码通过document选中fileForm表单,然后在调用该表单的submit方法即可实现用button按钮间接完成submit方法的功能,但说到底还是调用submit方法。

下面看下JavaScript使用button提交表单的方法

<form action="test.html" method="POST">
  <input type="button" value="提交"/>
</form>  
 <!-- 用提交表单,重要 -->
<script type="text/javascript">
//定位提交按钮

 var inputElement = document.getElementsByTagName("input")[0];

//为提交按钮添加单击事件

 inputElement.onclick = function(){
  
//定位<form>标签,forms表示document对象中所有表单的集合,通过下标引用不同的表单,从0开始
    var formElement = document.forms[0];
    //提交表单,提交到action属性指定的地方
    formElement.submit();
   }  
 </script>

以上所述是小编给大家介绍的JavaScript在form表单中使用button按钮实现submit提交方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
在线编辑器的实现原理(兼容IE和FireFox)
Mar 09 Javascript
再探JavaScript作用域
Sep 24 Javascript
JavaScript中getUTCMinutes()方法的使用详解
Jun 10 Javascript
JS实现的另类手风琴效果网页内容切换代码
Sep 08 Javascript
jQuery移动web开发中的页面初始化与加载事件
Dec 03 Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
Mar 14 Javascript
js初始化验证实例详解
Nov 26 Javascript
Web技术实现移动监测的介绍
Sep 18 Javascript
微信小程序排坑指南详解
May 23 Javascript
微信小程序http连接访问解决方案的示例
Nov 05 Javascript
详解JS取出两个数组中的不同或相同元素
Mar 20 Javascript
Js实现复选框的全选、全不选反选功能代码实例
Feb 28 Javascript
canvas绘制表盘时钟
Jan 23 #Javascript
canvas绘制的直线动画
Jan 23 #Javascript
node.js实现复制文本到剪切板的功能
Jan 23 #Javascript
jQuery 全选 全不选 事件绑定的实现代码
Jan 23 #Javascript
Javascript中构造函数要注意的一些坑
Jan 23 #Javascript
在 Angular2 中实现自定义校验指令(确认密码)的方法
Jan 23 #Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
Jan 23 #Javascript
You might like
IIS下PHP连接数据库提示mysql undefined function mysql_connect()
2010/06/04 PHP
php 删除cookie方法详解
2014/12/01 PHP
php简单实现短网址(短链)还原的方法(测试可用)
2016/05/09 PHP
Yii2 GridView实现列表页直接修改数据的方法
2016/05/16 PHP
PHP常见加密函数用法示例【crypt与md5】
2019/01/27 PHP
使用composer命令加载vendor中的第三方类库 的方法
2019/07/09 PHP
基于ThinkPHP删除目录及目录文件函数
2020/10/28 PHP
javascript 传统事件模型构造的事件监听器实现代码
2010/05/31 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
2014/03/08 Javascript
jquery根据锚点offset值实现动画切换
2014/09/11 Javascript
js判断文本框剩余可输入字数的方法
2015/02/04 Javascript
新手快速学习JavaScript免费教程资源汇总
2015/06/25 Javascript
Angularjs中使用Filters详解
2016/03/11 Javascript
星期几的不同脚本写法(推荐)
2016/06/01 Javascript
JavaScript基于DOM操作实现简单的数学运算功能示例
2017/01/16 Javascript
boostrapTable的refresh和refreshOptions区别浅析
2017/01/22 Javascript
Jquery树插件zTree实现菜单树
2017/01/24 Javascript
限时抢购-倒计时的完整实例(分享)
2017/09/17 Javascript
Vue-router路由判断页面未登录跳转到登录页面的实例
2017/10/26 Javascript
vue项目实战总结篇
2018/02/11 Javascript
layui table设置前台过滤转义等方法
2018/08/17 Javascript
小程序中this.setData的使用和注意事项
2019/08/28 Javascript
vue 实现路由跳转时更改页面title
2019/11/05 Javascript
[54:33]2018DOTA2亚洲邀请赛小组赛 A组加赛 Liquid vs Optic
2018/04/03 DOTA
python中assert用法实例分析
2015/04/30 Python
人机交互程序 python实现人机对话
2017/11/14 Python
python爬虫简单的添加代理进行访问的实现代码
2019/04/04 Python
python Matplotlib底图中鼠标滑过显示隐藏内容的实例代码
2019/07/31 Python
解决python多行注释引发缩进错误的问题
2019/08/23 Python
Pytorch上下采样函数--interpolate用法
2020/07/07 Python
Python基础进阶之海量表情包多线程爬虫功能的实现
2020/12/17 Python
构造方法和其他方法的区别
2016/04/26 面试题
投资意向书
2014/07/30 职场文书
五心教育心得体会
2014/09/04 职场文书
python保存大型 .mat 数据文件报错超出 IO 限制的操作
2021/05/10 Python
分享mysql的current_timestamp小坑及解决
2021/11/27 MySQL