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 相关文章推荐
早该知道的7个JavaScript技巧
Mar 27 Javascript
jQuery实现倒计时按钮功能代码分享
Sep 03 Javascript
javascript 广告移动特效的实现代码
Jun 25 Javascript
JS Canvas定时器模拟动态加载动画
Sep 17 Javascript
用JS动态设置CSS样式常见方法小结(推荐)
Nov 10 Javascript
JS简单获取当前日期和农历日期的方法
Apr 17 Javascript
AngularJS日程表案例详解
Aug 15 Javascript
Vue.js移动端左滑删除组件的实现代码
Sep 08 Javascript
Vue2.0父子组件传递函数的教程详解
Oct 16 Javascript
JS异步函数队列功能实例分析
Nov 28 Javascript
vue-cli3+typescript新建一个项目的思路分析
Aug 06 Javascript
简单了解JavaScript弹窗实现代码
May 07 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
咖啡与水的关系
2021/03/03 冲泡冲煮
PHP判断浏览器、判断语言代码分享
2015/03/05 PHP
php简单实现快速排序的方法
2015/04/04 PHP
PHP实现QQ登录实例代码
2016/01/14 PHP
js类的静态属性和实例属性的理解
2009/10/01 Javascript
模拟多级复选框效果的jquery代码
2013/08/13 Javascript
js单例模式详解实例
2013/11/21 Javascript
jQuery中bind,live,delegate与one方法的用法及区别解析
2013/12/30 Javascript
完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
2014/12/17 Javascript
javascript实现密码验证
2015/11/10 Javascript
JS实现页面打印功能
2017/03/16 Javascript
巧用weui.topTips验证数据的实例
2017/04/17 Javascript
VueJs单页应用实现微信网页授权及微信分享功能示例
2017/07/26 Javascript
Vue基于NUXT的SSR详解
2017/10/24 Javascript
jQuery常见的遍历DOM操作详解
2018/09/05 jQuery
vue-router权限控制(简单方式)
2018/10/29 Javascript
JSON字符串操作移除空串更改key/value的介绍
2019/01/05 Javascript
微信小程序时间轴实现方法示例
2019/01/14 Javascript
JQuery 实现文件下载的常用方法分析
2019/10/29 jQuery
全面解析Vue中的$nextTick
2020/12/24 Vue.js
原生js实现滑块区间组件
2021/01/20 Javascript
[52:03]Secret vs VG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
[43:26]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第二场 11.20
2020/11/23 DOTA
Windows系统下多版本pip的共存问题详解
2017/10/10 Python
对python生成业务报表的实例详解
2019/02/03 Python
学习Django知识点分享
2019/09/11 Python
python实现画图工具
2020/08/27 Python
世界最大的私人旅行指南出版商:孤独星球
2016/08/23 全球购物
Lucene推荐的分页方式是什么?
2015/12/07 面试题
先进集体事迹材料范文
2014/12/25 职场文书
表扬信范文
2015/05/04 职场文书
优秀班主任工作总结2015
2015/05/25 职场文书
《世界多美呀》教学反思
2016/02/22 职场文书
MYSQL 表的全面总结
2021/11/11 MySQL
win10以太网连接不上怎么办?Win10连接以太网详细教程
2022/04/08 数码科技