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 相关文章推荐
初学prototype,发个JS接受URL参数的代码
Sep 25 Javascript
js验证表单大全
Nov 25 Javascript
JavaScript 验证浏览器是否支持javascript的方法小结
May 17 Javascript
js监听键盘事件示例代码
Jul 26 Javascript
页面加载完成后再执行JS的jquery写法以及区别说明
Feb 22 Javascript
浅谈Angular中ngModel的$render
Oct 24 Javascript
深入理解在JS中通过四种设置事件处理程序的方法
Mar 02 Javascript
AngularJS折叠菜单实现方法示例
May 18 Javascript
node中使用es5/6以及支持性与性能对比
Aug 11 Javascript
Vue编写多地区选择组件
Aug 21 Javascript
Three.js实现浏览器变动时进行自适应的方法
Sep 26 Javascript
Vue中使用webpack别名的方法实例详解
Jun 19 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之第七天
2006/10/09 PHP
php 生成文字png图片的代码
2011/04/17 PHP
一个显示某段时间内每个月的方法 返回由这些月份组成的数组
2012/05/16 PHP
MongoDB在PHP中的常用操作小结
2014/02/20 PHP
orm获取关联表里的属性值
2016/04/17 PHP
php使用json_decode后数字对象转换成了科学计数法的解决方法
2017/02/20 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
javascript jQuery插件练习
2008/12/24 Javascript
常用的JavaScript WEB操作方法分享
2015/02/28 Javascript
JavaScript字符串常用类使用方法汇总
2015/04/14 Javascript
移动端JQ插件hammer使用详解
2015/07/03 Javascript
JS实现不规则TAB选项卡效果代码
2015/09/16 Javascript
理解javascript中try...catch...finally
2015/12/25 Javascript
微信小程序 富文本转文本实例详解
2016/10/24 Javascript
jquery html5 视频播放控制代码
2016/11/06 Javascript
AngularJS 霸道的过滤器小结
2017/04/26 Javascript
JavaScript常见JSON操作实例分析
2018/08/08 Javascript
vue自定义指令实现方法详解
2019/02/11 Javascript
微信小程序云开发 搭建一个管理小程序
2019/05/17 Javascript
详解express使用vue-router的history踩坑
2019/06/05 Javascript
使用webpack搭建vue项目及注意事项
2019/06/10 Javascript
使用python在校内发人人网状态(人人网看状态)
2014/02/19 Python
在ironpython中利用装饰器执行SQL操作的例子
2015/05/02 Python
Python OpenCV实现鼠标画框效果
2020/08/19 Python
pandas实现将日期转换成timestamp
2019/12/07 Python
python next()和iter()函数原理解析
2020/02/07 Python
浅谈Python协程
2020/06/17 Python
keras model.fit 解决validation_spilt=num 的问题
2020/06/19 Python
浅谈Python描述数据结构之KMP篇
2020/09/06 Python
详解Selenium 元素定位和WebDriver常用方法
2020/12/04 Python
MoviePy常用剪辑类及Python视频剪辑自动化
2020/12/18 Python
生物有机护肤品:Aurelia Probiotic Skincare
2018/01/31 全球购物
波兰灯具、照明和LED购物网站:Lampy.pl
2019/03/11 全球购物
财务部岗位职责
2013/11/19 职场文书
六一儿童节演讲稿
2014/05/23 职场文书
人事任命通知
2015/04/20 职场文书