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 xml为数据源的下拉框控件
Jul 07 Javascript
JS跨域总结
Aug 30 Javascript
网站如何做到完全不需要jQuery也可以满足简单需求
Jun 27 Javascript
JavaScript自执行闭包的小例子
Jun 29 Javascript
jquery.post用法关于type设置问题补充
Jan 03 Javascript
跟我学习javascript的undefined与null
Nov 17 Javascript
js不间断滚动的简单实现
Jun 03 Javascript
详解微信小程序 template添加绑定事件
Jun 23 Javascript
JS设计模式之惰性模式(二)
Sep 29 Javascript
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 jQuery
Vue运用transition实现过渡动画
May 06 Javascript
JavaScript页面倒计时功能完整示例
May 15 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版(2)
2006/10/09 PHP
PHP 和 XML: 使用expat函数(一)
2006/10/09 PHP
Http 1.1 Etag 与 Last-Modified提高php效率
2008/01/10 PHP
php生成略缩图代码
2012/07/16 PHP
PHP删除二维数组中相同元素及数组重复值的方法示例
2017/05/05 PHP
PHP Web表单生成器案例分析
2020/06/02 PHP
一种JavaScript的设计模式
2006/11/22 Javascript
通过Jscript中@cc_on 语句识别IE浏览器及版本的代码
2011/05/07 Javascript
js中的referrer返回上一页使用介绍
2013/09/26 Javascript
使用bat打开多个cmd窗口执行gulp、node
2017/02/17 Javascript
使用vue框架 Ajax获取数据列表并用BootStrap显示出来
2017/04/24 Javascript
使用json-server简单完成CRUD模拟后台数据的方法
2018/07/12 Javascript
JQuery实现ajax请求的示例和注意事项
2018/12/10 jQuery
JavaScript 作用域scope简单汇总
2019/10/23 Javascript
JavaScript判断数组类型的方法
2019/10/23 Javascript
jQuery实现的上拉刷新功能组件示例
2020/05/01 jQuery
ES6箭头函数和扩展实例分析
2020/05/23 Javascript
node.js如何根据URL返回指定的图片详解
2020/10/21 Javascript
[原创]pip和pygal的安装实例教程
2017/12/07 Python
Python使用random.shuffle()打乱列表顺序的方法
2018/11/08 Python
tensorflow自定义激活函数实例
2020/02/04 Python
解决keras GAN训练是loss不发生变化,accuracy一直为0.5的问题
2020/07/02 Python
opencv+pyQt5实现图片阈值编辑器/寻色块阈值利器
2020/11/13 Python
细说CSS3中的选择符
2008/10/17 HTML / CSS
Html5原生拖拽相关事件简介以及基础实现
2020/11/19 HTML / CSS
英国奢侈皮具品牌:Aspinal of London
2018/09/02 全球购物
诗普兰迪官方网站:Splendid
2018/09/18 全球购物
实习老师个人总结的自我评价
2013/09/28 职场文书
材料化学专业求职信
2014/07/15 职场文书
四大名著读书笔记
2015/06/25 职场文书
订货会主持词
2015/07/01 职场文书
用Python爬取英雄联盟的皮肤详细示例
2021/12/06 Python
python 详解turtle画爱心代码
2022/02/15 Python
使用ICOM IC-R9500接收机同时测评十台收音机中波接收性能
2022/05/10 无线电
移除Selenium中window.navigator.webdriver值
2022/06/10 Python
详解MySQL的内连接和外连接
2023/05/08 MySQL