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 使td内容不换行不撑开
Nov 29 Javascript
js自动下载文件到本地的实现代码
Apr 28 Javascript
JavaScript实现点击按钮后变灰避免多次重复提交
Jul 15 Javascript
深入理解javascript严格模式(Strict Mode)
Nov 28 Javascript
删除javascript所创建子节点的方法
May 21 Javascript
jQuery简单实现列表隐藏和显示效果示例
Sep 12 Javascript
ReactNative-JS 调用原生方法实例代码
Oct 08 Javascript
详解从react转职到vue开发的项目准备
Jan 14 Javascript
vuex如何重置所有state(可定制)
Jan 17 Javascript
通过JavaScript下载文件到本地的方法(单文件)
Mar 17 Javascript
vue实践---vue不依赖外部资源实现简单多语操作
Sep 21 Javascript
vue完美实现el-table列宽自适应
May 08 Vue.js
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
利用discuz实现PHP大文件上传应用实例代码
2008/11/14 PHP
php设计模式 Adapter(适配器模式)
2011/06/26 PHP
PHP实现Google plus的好友拖拽分组效果
2016/10/21 PHP
PHP常见的几种攻击方式实例小结
2019/04/29 PHP
Laravel框架控制器的middleware中间件用法分析
2019/09/30 PHP
Document对象内容集合(比较全)
2010/09/06 Javascript
nodejs教程之异步I/O
2014/11/21 NodeJs
javascript中HTMLDOM操作详解
2014/12/11 Javascript
NodeJS学习笔记之Http模块
2015/01/13 NodeJs
javascript实现图像循环明暗变化的方法
2015/02/25 Javascript
jQuery中next方法用法实例
2015/04/24 Javascript
深入理解JavaScript中的浮点数
2016/05/18 Javascript
终于实现了!精彩的jquery弹幕效果
2016/07/18 Javascript
使用jsonp实现跨域获取数据实例讲解
2016/12/25 Javascript
vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
2017/03/30 Javascript
vue Render中slots的使用的实例代码
2017/07/19 Javascript
vue2.0的虚拟DOM渲染思路分析
2018/08/09 Javascript
vue 解决setTimeOut和setInterval函数无效报错的问题
2020/07/30 Javascript
[09:43]DOTA2每周TOP10 精彩击杀集锦vol.5
2014/06/25 DOTA
Python3.4编程实现简单抓取爬虫功能示例
2017/09/14 Python
python+selenium select下拉选择框定位处理方法
2019/08/24 Python
python分别打包出32位和64位应用程序
2020/02/18 Python
详解Django中异步任务之django-celery
2020/11/05 Python
Vichy薇姿加拿大官网:法国药妆,全球专业敏感肌护肤领先品牌
2018/07/11 全球购物
如何在Oracle中查看各个表、表空间占用空间的大小
2015/10/31 面试题
新年抽奖获奖感言
2014/03/02 职场文书
中国入世承诺
2014/04/01 职场文书
精神文明单位申报材料
2014/05/02 职场文书
诚信贷款承诺书
2014/05/30 职场文书
公司优秀员工获奖感言
2014/08/14 职场文书
贫困证明模板(3篇)
2014/09/16 职场文书
入股协议书范本
2014/11/01 职场文书
新闻报道稿范文
2015/07/23 职场文书
酒店工程部的岗位职责汇总大全
2019/10/23 职场文书
详解Python为什么不用设计模式
2021/06/24 Python
Python装饰器详细介绍
2022/03/25 Python