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 相关文章推荐
jquery $.ajax()取xml数据的小问题解决方法
Nov 20 Javascript
jqPlot 图表中文API使用文档及源码和在线示例
Feb 07 Javascript
javascript闭包的高级使用方法实例
Jul 04 Javascript
javascript简单事件处理和with用法介绍
Sep 16 Javascript
浅析jquery的作用与优势
Dec 02 Javascript
js仿土豆网带缩略图的焦点图片切换效果实现方法
Feb 23 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
Mar 03 Javascript
avalon js实现仿微博拖动图片排序
Aug 14 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
Mar 08 Javascript
JS函数多个参数默认值指定方法分析
Nov 28 Javascript
利用node.js如何搭建一个简易的即时响应服务器
May 28 Javascript
浅谈Vue数据绑定的原理
Jan 08 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
打造计数器DIY三步曲(上)
2006/10/09 PHP
LotusPhp笔记之:基于ObjectUtil组件的使用分析
2013/05/06 PHP
PHP错误提示的关闭方法详解
2013/06/23 PHP
JSuggest自动匹配下拉框使用方法(示例代码)
2013/12/27 Javascript
JavaScript怎么判断图片是否加载完成以便获取其尺寸
2014/05/08 Javascript
js 中将多个逗号替换为一个逗号的代码
2014/06/07 Javascript
easyui Droppable组件实现放置特效
2015/08/19 Javascript
JS右下角广告窗口代码(可收缩、展开及关闭)
2015/09/04 Javascript
javascript实现状态栏中文字动态显示的方法
2015/10/20 Javascript
JS防止网页被嵌入iframe框架的方法分析
2016/09/13 Javascript
解析jQueryEasyUI的使用
2016/11/22 Javascript
浅谈Vue网络请求之interceptors实际应用
2018/02/28 Javascript
记一次用vue做的活动页的方法步骤
2019/04/11 Javascript
深入了解JavaScript 私有化
2019/05/30 Javascript
[01:15:16]DOTA2-DPC中国联赛 正赛 Elephant vs Aster BO3 第一场 1月26日
2021/03/11 DOTA
Python数据类型中的“冒号“[::]——分片与步长操作示例
2018/01/24 Python
python修改list中所有元素类型的三种方法
2018/04/09 Python
pandas数值计算与排序方法
2018/04/12 Python
完美解决Pycharm无法导入包的问题 Unresolved reference
2018/05/18 Python
利用Python产生加密表和解密表的实现方法
2019/10/15 Python
python GUI库图形界面开发之PyQt5 UI主线程与耗时线程分离详细方法实例
2020/02/26 Python
Python 解决火狐浏览器不弹出下载框直接下载的问题
2020/03/09 Python
如何用Matplotlib 画三维图的示例代码
2020/07/28 Python
Spartoo英国:欧洲最大的网上鞋店
2016/09/13 全球购物
海信商城:海信电视、科龙空调、容声冰箱官方专卖
2017/02/07 全球购物
美国领先的水果篮送货公司和新鲜水果供应商:The Fruit Company
2018/02/13 全球购物
决定成败的关键——创业计划书
2014/01/24 职场文书
村委会换届选举方案
2014/05/03 职场文书
爱心捐书活动总结
2014/07/05 职场文书
关于清明节的演讲稿
2014/09/13 职场文书
2014大学校园光棍节活动策划书
2014/09/29 职场文书
2014年纳税评估工作总结
2014/12/23 职场文书
Anaconda安装pytorch及配置PyCharm 2021环境
2021/06/04 Python
DBCA命令行搭建Oracle ADG的流程
2021/06/11 Oracle
《游戏王:大师决斗》将推出新卡牌包4月4日上线
2022/03/31 其他游戏
java.util.NoSuchElementException原因及两种解决方法
2022/06/28 Java/Android