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 相关文章推荐
javascript学习笔记(一) 在html中使用javascript
Jun 18 Javascript
Three.js源码阅读笔记(Object3D类)
Dec 27 Javascript
JQuery页面图片切换和新闻列表滚动效果的具体实现
Sep 26 Javascript
windows8.1+iis8.5下安装node.js开发环境
Dec 12 Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
Jun 01 Javascript
axios 封装上传文件的请求方法
Sep 26 Javascript
three.js搭建室内场景教程
Dec 30 Javascript
vue的列表交错过渡实现代码示例
May 05 Javascript
js实现移动端tab切换时下划线滑动效果
Sep 08 Javascript
微信小程序如何实现五星评价功能
Oct 15 Javascript
一篇文章带你浅入webpack的DLL优化打包
Feb 20 Javascript
vue移动端写的拖拽功能示例代码
Sep 09 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
探讨php define()函数及defined()函数使用详解
2013/06/09 PHP
php inc文件使用的风险和注意事项
2013/11/12 PHP
laravel 验证错误信息到 blade模板的方法
2019/09/29 PHP
对google个性主页的拖拽效果的js的完整注释[转]
2007/04/10 Javascript
jQuery使用动态渲染表单功能完成ajax文件下载
2013/01/15 Javascript
火狐下table中创建form导致两个table之间出现空白
2013/09/02 Javascript
jQuery实现信息提示框(带有圆角框与动画)效果
2015/08/07 Javascript
JavaScript文本框脚本编写的注意事项
2016/01/25 Javascript
jquery分页插件jquery.pagination.js使用方法解析
2016/04/01 Javascript
javascript 广告移动特效的实现代码
2016/06/25 Javascript
jQuery深拷贝Json对象简单示例
2016/07/06 Javascript
XMLHttpRequest Level 2 使用指南
2016/08/26 Javascript
jQuery UI制作选项卡(tabs)
2016/12/13 Javascript
利用JS实现文字的聚合动画效果
2017/01/22 Javascript
JS html时钟制作代码分享
2017/03/03 Javascript
jquery.flot.js简单绘制折线图用法示例
2017/03/13 Javascript
vue中页面跳转拦截器的实现方法
2017/08/23 Javascript
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
2017/09/15 Javascript
jQuery实现左右滑动的toggle方法
2018/03/03 jQuery
深入了解js原型模式
2019/05/30 Javascript
微信小程序官方动态自定义底部tabBar的例子
2019/09/04 Javascript
[06:50]DSPL次级职业联赛十强晋级之路
2014/11/18 DOTA
python交互式图形编程实例(一)
2017/11/17 Python
python实现聊天小程序
2018/03/13 Python
浅谈PyQt5 的帮助文档查找方法,可以查看每个类的方法
2019/06/25 Python
python获取依赖包和安装依赖包教程
2020/02/13 Python
pycharm通过anaconda安装pyqt5的教程
2020/03/24 Python
英国HYPE双肩包官网:英国本土时尚潮牌
2018/09/26 全球购物
Noon埃及:埃及在线购物
2019/11/26 全球购物
西安启天科技有限公司网络工程师面试题笔试题
2016/06/12 面试题
《大自然的语言》教学反思
2014/04/08 职场文书
乡镇党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
学校端午节活动总结
2015/02/11 职场文书
新郎接新娘保证书
2015/05/08 职场文书
初中毕业生感言
2015/07/31 职场文书
史上最全的军训拉歌口号
2015/12/25 职场文书