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中遭遇级联表达式陷阱
Mar 08 Javascript
javascript 建设银行登陆键盘
Jun 10 Javascript
Extjs学习笔记之九 数据模型(上)
Jan 11 Javascript
通过JavaScript控制字体大小的代码
Oct 04 Javascript
输入密码检测大写是否锁定js实现代码
Dec 03 Javascript
E3 tree 1.6在Firefox下显示问题的修复方法
Jan 30 Javascript
JavaScript的作用域和块级作用域概念理解
Sep 21 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
Dec 01 Javascript
JS自定义函数对web前端上传的文件进行类型大小判断
Oct 19 Javascript
基于vue的下拉刷新指令和滚动刷新指令
Dec 23 Javascript
JS实现页面侧边栏效果探究
Jan 08 Javascript
vue3.0 数字翻牌组件的使用方法详解
Apr 20 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
怎样辨别一杯好咖啡
2021/03/03 新手入门
phpmyadmin 访问被拒绝的真实原因
2009/06/15 PHP
php两点地理坐标距离的计算方法
2018/12/29 PHP
php快速导入大量数据的实例方法
2019/09/23 PHP
JavaScript中为什么null==0为false而null大于=0为true(个人研究)
2013/09/16 Javascript
js的onload事件及初始化按钮事件示例代码
2013/09/25 Javascript
node.js中的console.dir方法使用说明
2014/12/10 Javascript
js实现jquery的offset()方法实例
2015/01/10 Javascript
javascript省市区三级联动下拉框菜单实例演示
2015/11/29 Javascript
AngularJS中的Directive实现延迟加载
2016/01/25 Javascript
Dojo获取下拉框的文本和值实例代码
2016/05/27 Javascript
Nodejs从有门道无门菜鸟起飞必看教程
2016/07/20 NodeJs
echart简介_动力节点Java学院整理
2017/08/11 Javascript
JS实现快速比较两个字符串中包含有相同数字的方法
2017/09/11 Javascript
nodejs项目windows下开机自启动的方法
2017/11/22 NodeJs
vue.js2.0 实现better-scroll的滚动效果实例详解
2018/08/13 Javascript
python选择排序算法的实现代码
2013/11/21 Python
在Python的setuptools框架下生成egg的教程
2015/04/13 Python
Python保存MongoDB上的文件到本地的方法
2016/03/16 Python
python中利用xml.dom模块解析xml的方法教程
2017/05/24 Python
python调用API实现智能回复机器人
2018/04/10 Python
Python 实现引用其他.py文件中的类和类的方法
2018/04/29 Python
PyQt5基本控件使用之消息弹出、用户输入、文件对话框的使用方法
2019/08/06 Python
python垃圾回收机制(GC)原理解析
2019/12/30 Python
PyTorch中permute的用法详解
2019/12/30 Python
pytorch 使用加载训练好的模型做inference
2020/02/20 Python
浅析python 动态库m.so.1.0错误问题
2020/05/09 Python
Html5移动端弹幕动画实现示例代码
2018/08/27 HTML / CSS
Paradigit比利时电脑卖场:购买笔记本、电脑、平板和外围设备
2016/11/28 全球购物
印度尼西亚最大和最全面的网络商城:Blibli.com
2017/10/04 全球购物
英国领先的男装设计师服装独立零售商:Repertoire Fashion
2020/10/19 全球购物
职业教育毕业生求职信
2013/11/09 职场文书
毕业生应聘幼儿园的自荐信
2013/11/20 职场文书
画展邀请函
2015/01/31 职场文书
重阳节座谈会主持词
2015/07/03 职场文书
探究Mysql模糊查询是否区分大小写
2021/06/11 MySQL