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生成/解析dom的CDATA类型的字段的代码
Apr 22 Javascript
javascript attachEvent绑定多个事件执行顺序问题
Oct 20 Javascript
收集的一些Array及String原型对象的扩展实现代码
Dec 05 Javascript
用JavaScript来美化HTML的select标签的下拉列表效果
Nov 17 Javascript
JQuery学习总结【一】
Dec 01 Javascript
JavaScript 网页中实现一个计算当年还剩多少时间的倒数计时程序
Jan 25 Javascript
jQuery中layer分页器的使用
Mar 13 Javascript
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
Jun 13 jQuery
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
Jul 22 jQuery
详解vue中使用protobuf踩坑记
May 07 Javascript
vue 实现强制类型转换 数字类型转为字符串
Nov 07 Javascript
如何使用 vue-cli 创建模板项目
Nov 19 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
nginx+php-fpm配置文件的组织结构介绍
2012/11/07 PHP
解析PHP的session过期设置
2013/06/29 PHP
PHPCMS忘记后台密码的解决办法
2016/10/30 PHP
PHP接口并发测试的方法(推荐)
2016/12/15 PHP
PHP _construct()函数讲解
2019/02/03 PHP
jQuery Ajax 全解析
2009/02/08 Javascript
JavaScript 乱码问题
2009/08/06 Javascript
js中apply方法的使用详细解析
2013/11/04 Javascript
Javascript 赋值机制详解
2014/11/23 Javascript
JavaScript闭包详解
2015/02/02 Javascript
EasyUI,点击开启编辑框,并且编辑框获得焦点的方法
2015/03/01 Javascript
jQuery实现图片预加载效果
2015/11/27 Javascript
一道JS前端闭包面试题解析
2015/12/25 Javascript
JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
2016/04/05 Javascript
gulp-htmlmin压缩html的gulp插件实例代码
2016/06/06 Javascript
js插件Jcrop自定义截取图片功能
2016/10/14 Javascript
Vue.js组件tab实现选项卡切换
2020/03/23 Javascript
javascript观察者模式实现自动刷新效果
2017/09/05 Javascript
微信小程序自定义tabBar组件开发详解
2020/09/24 Javascript
基于JS实现计算24点算法代码实例解析
2020/07/23 Javascript
[37:22]DOTA2上海特级锦标赛D组资格赛#2 Liquid VS VP第一局
2016/02/28 DOTA
python逆向入门教程
2018/01/15 Python
Python模拟随机游走图形效果示例
2018/02/06 Python
python基于物品协同过滤算法实现代码
2018/05/31 Python
django如何连接已存在数据的数据库
2018/08/14 Python
OpenCV里的imshow()和Matplotlib.pyplot的imshow()的实现
2019/11/25 Python
Django ORM filter() 的运用详解
2020/05/14 Python
解决tensorflow 释放图,删除变量问题
2020/06/23 Python
德国购买踏板车网站:Microscooter
2019/10/14 全球购物
大学生毕业自我鉴定范文
2013/11/03 职场文书
计算机个人求职信范例
2014/01/24 职场文书
第一批党的群众路线教育实践活动工作总结
2014/03/03 职场文书
论文指导教师评语
2014/04/28 职场文书
土建技术员岗位职责
2015/04/11 职场文书
2016同学毕业寄语大全
2015/12/04 职场文书
职场中的你,辞职信写对了吗?
2019/06/26 职场文书