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与JS里submit()的区别示例介绍
Feb 17 Javascript
禁止iframe脚本弹出的窗口覆盖了父窗口的方法
Sep 06 Javascript
javaScript的函数对象的声明详解
Feb 06 Javascript
Node.js项目中调用JavaScript的EJS模板库的方法
Mar 11 Javascript
javascript中利用柯里化函数实现bind方法
Apr 29 Javascript
js HTML5 Canvas绘制转盘抽奖
Sep 13 Javascript
Jquery实现跨域异步上传文件总结
Feb 03 Javascript
jQuery实现遍历复选框的方法示例
Mar 06 Javascript
详解React 16 中的异常处理
Jul 28 Javascript
Javascript刷新页面的实例
Sep 23 Javascript
浅谈Vue SSR 的 Cookies 问题
Nov 20 Javascript
Vue CLI 3搭建vue+vuex最全分析(推荐)
Sep 27 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
生成ubuntu自动切换壁纸xml文件的php代码
2010/07/17 PHP
浅谈PHP正则表达式中修饰符/i, /is, /s, /isU
2014/10/21 PHP
php使用glob函数遍历文件和目录详解
2016/09/23 PHP
JavaScript 动态创建VML的方法
2009/10/14 Javascript
让ie6也支持websocket采用flash封装实现
2013/02/18 Javascript
jquery更换文章内容与改变字体大小代码
2013/09/30 Javascript
jquery制作居中遮罩层效果分享
2014/02/21 Javascript
nodejs 实现模拟form表单上传文件
2014/07/14 NodeJs
js实现checkbox全选、不选与反选的方法
2015/02/09 Javascript
JavaScript中setUTCMilliseconds()方法的使用详解
2015/06/12 Javascript
使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
2016/02/15 Javascript
微信小程序中实现一对多发消息详解及实例代码
2017/02/14 Javascript
详解vue的数据binding绑定原理
2017/04/12 Javascript
利用js编写网页进度条效果
2017/10/08 Javascript
vue路由懒加载的实现方法
2018/03/12 Javascript
JavaScript模拟实现自由落体效果
2018/08/28 Javascript
vue使用echarts图表的详细方法
2018/10/22 Javascript
解决$store.getters调用不执行的问题
2019/11/08 Javascript
vuex存取值和映射函数使用说明
2020/07/24 Javascript
JavaScript实现网页下拉菜单效果
2020/11/20 Javascript
vue3.0 自适应不同分辨率电脑的操作
2021/02/06 Vue.js
Python判断操作系统类型代码分享
2014/11/22 Python
Python中的localtime()方法使用详解
2015/05/22 Python
简单解决Python文件中文编码问题
2015/11/22 Python
python装饰器与递归算法详解
2016/02/18 Python
遗传算法之Python实现代码
2017/10/10 Python
Python实现识别手写数字 Python图片读入与处理
2020/03/23 Python
对python requests的content和text方法的区别详解
2018/10/11 Python
python利用dlib获取人脸的68个landmark
2019/11/27 Python
python pandas移动窗口函数rolling的用法
2020/02/29 Python
Python类的绑定方法和非绑定方法实例解析
2020/03/04 Python
python实现图片转换成素描和漫画格式
2020/08/19 Python
澳大利亚鞋仓库:Shoe Warehouse
2019/07/25 全球购物
委托书的写法
2014/08/30 职场文书
四风自我剖析材料思想汇报
2014/10/01 职场文书
一篇文章搞懂python混乱的切换操作与优雅的推导式
2021/08/23 Python