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 相关文章推荐
8款非常棒的响应式jQuery 幻灯片插件推荐
Feb 02 Javascript
关于jQuery $.isNumeric vs. $.isNaN vs. isNaN
Apr 15 Javascript
使用GruntJS构建Web程序之合并压缩篇
Jun 06 Javascript
详解JavaScript的变量和数据类型
Nov 27 Javascript
jQuery旋转木马式幻灯片轮播特效
Dec 04 Javascript
jquery获取复选框checkbox的值的简单实现方法
May 26 Javascript
使用JavaScript获取Request中参数的值方法
Sep 27 Javascript
Bootstrap布局之栅格系统学习笔记
May 04 Javascript
node.js操作MongoDB的实例详解
Oct 11 Javascript
js动态添加表格逐行添加、删除、遍历取值的实例代码
Jan 25 Javascript
vue配置接口域名方法总结
May 12 Javascript
JavaScript数组去重实现方法小结
Jan 17 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在程序中将网页生成word文档并提供下载的代码
2012/10/09 PHP
解析如何修改phpmyadmin中的默认登陆超时时间
2013/06/25 PHP
[原创]提供复制本站内容时出现,该文章转自脚本之家等字样的js代码
2007/03/27 Javascript
Javascript 检测、添加、移除样式(className)函数代码
2009/09/08 Javascript
URL地址中的#符号使用说明
2011/02/12 Javascript
js判断屏幕分辨率的代码
2013/07/16 Javascript
JSuggest自动匹配下拉框使用方法(示例代码)
2013/12/27 Javascript
详解基于javascript实现的苹果系统底部菜单
2016/12/02 Javascript
JS及JQuery对Html内容编码,Html转义
2017/02/17 Javascript
Bootstrap免费字体和图标网站(值得收藏)
2017/03/16 Javascript
Vue 项目中遇到的跨域问题及解决方法(后台php)
2018/03/28 Javascript
详解ES6中的Map与Set集合
2019/03/22 Javascript
微信小程序实现日期格式化和倒计时
2020/11/01 Javascript
vue cli3 配置proxy代理无效的解决
2019/10/30 Javascript
微信分享invalid signature签名错误踩过的坑
2020/04/11 Javascript
Nodejs环境实现socket通信过程解析
2020/07/03 NodeJs
[03:07]【DOTA2亚洲邀请赛】我们,梦开始的地方
2017/03/07 DOTA
对命令行模式与python交互模式介绍
2018/05/12 Python
Flask框架Flask-Principal基本用法实例分析
2018/07/23 Python
python numpy实现文件存取的示例代码
2019/05/26 Python
python3 mmh3安装及使用方法
2019/10/09 Python
Python3如何在服务器打印资产信息
2020/08/27 Python
Backcountry旗下的户外商品闪购网站:steep&cheap
2016/09/22 全球购物
物流专业大学生求职信范文
2013/10/28 职场文书
应届护士推荐信
2013/11/16 职场文书
周年庆典邀请函范文
2014/01/23 职场文书
股份转让协议书
2014/04/12 职场文书
学校政风行风评议工作总结
2014/10/21 职场文书
个人欠款协议书范本2014
2014/11/02 职场文书
导游欢送词
2015/01/31 职场文书
端午节活动总结报告
2015/02/11 职场文书
2015年基层党建工作汇报材料
2015/06/25 职场文书
2019暑假学生安全口号
2019/06/27 职场文书
Mysql MVCC机制原理详解
2021/04/20 MySQL
html+css实现赛博朋克风格按钮
2021/05/26 HTML / CSS
Pytorch中的学习率衰减及其用法详解
2021/06/05 Python