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源码浅析 Enumerable部分之each方法
Jan 16 Javascript
js实现幻灯片播放图片示例代码
Nov 07 Javascript
用javascript为页面添加天气显示实现思路及代码
Dec 02 Javascript
删除javascript中注释语句的正则表达式
Jun 11 Javascript
Node.js事件循环(Event Loop)和线程池详解
Jan 28 Javascript
JQuery中attr方法和removeAttr方法用法实例
May 18 Javascript
css如何让浮动元素水平居中
Aug 07 Javascript
jQuery弹出层插件popShow(改进版)用法示例
Jan 23 Javascript
详解Axios统一错误处理与后置
Sep 26 Javascript
详解element-ui中form验证杂记
Mar 04 Javascript
使用vue for时为什么要key【推荐】
Jul 11 Javascript
Vue项目前后端联调(使用proxyTable实现跨域方式)
Jul 18 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
福利彩票幸运号码自动生成器
2006/10/09 PHP
php array_merge下进行数组合并的代码
2008/07/22 PHP
一个显示某段时间内每个月的方法 返回由这些月份组成的数组
2012/05/16 PHP
php cookie使用方法学习笔记分享
2013/11/07 PHP
php利用cookie实现自动登录的方法
2014/12/10 PHP
php中使用base HTTP验证的方法
2015/04/20 PHP
PHP MVC框架路由学习笔记
2016/03/02 PHP
php版微信数据统计接口用法示例
2016/10/12 PHP
使用Rancher在K8S上部署高性能PHP应用程序的教程
2020/07/10 PHP
JavaScript 脚本将当地时间转换成其它时区
2009/03/19 Javascript
传智播客学习之JavaScript基础篇
2009/11/13 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
2016/08/20 Javascript
Vue官网todoMVC示例代码
2018/01/29 Javascript
详解node.js的http模块实例演示
2018/07/12 Javascript
使用koa-log4管理nodeJs日志笔记的使用方法
2018/11/30 NodeJs
jsonp格式前端发送和后台接受写法的代码详解
2019/11/07 Javascript
详解小程序横屏方案对比
2020/06/28 Javascript
小程序实现上传视频功能
2020/08/18 Javascript
用javascript实现倒计时效果
2021/02/09 Javascript
[03:23:49]2016.12.17日完美“圣”典全回顾
2016/12/19 DOTA
python中mechanize库的简单使用示例
2014/01/10 Python
python使用BeautifulSoup分页网页中超链接的方法
2015/04/04 Python
Python打印scrapy蜘蛛抓取树结构的方法
2015/04/08 Python
python使用psutil模块获取系统状态
2016/08/27 Python
python实现上传下载文件功能
2020/11/19 Python
Python线性方程组求解运算示例
2018/01/17 Python
印尼旅游网站:via
2017/11/12 全球购物
如何用PHP实现邮件发送
2012/12/26 面试题
META-INF文件夹中的MANIFEST.MF的作用
2016/06/21 面试题
幼儿园新年寄语
2014/04/03 职场文书
纪检干部先进事迹材料
2014/08/23 职场文书
党员反对四风问题思想汇报
2014/09/12 职场文书
2014年教师党员自我评价范文
2014/09/22 职场文书
大学生迟到检讨书500字
2014/10/17 职场文书
2014村党支部书记党建工作汇报材料
2014/11/02 职场文书
小学感恩主题班会
2015/08/12 职场文书