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 高亮显示文本中重要的关键字
Dec 24 Javascript
js简单实现根据身份证号码识别性别年龄生日
Nov 29 Javascript
jQuery实现按键盘方向键翻页特效
Mar 18 Javascript
jQuery模仿阿里云购买服务器选择购买时间长度的代码
Apr 29 Javascript
AngularJS 路由和模板实例及路由地址简化方法(必看)
Jun 24 Javascript
AngularJs IE Compatibility 兼容老版本IE
Sep 01 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
Nov 07 Javascript
js实现登录框鼠标拖拽效果
Mar 09 Javascript
微信小程序-横向滑动scroll-view隐藏滚动条
Apr 20 Javascript
基于vue的短信验证码倒计时demo
Sep 13 Javascript
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
Mar 13 Javascript
js刷新页面location.reload()用法详解
Dec 09 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中使用curl_init函数的说明
2010/11/02 PHP
Yii核心验证器api详解
2016/11/23 PHP
基于jQuery的固定表格头部的代码(IE6,7,8测试通过)
2010/05/18 Javascript
新鲜出炉的js tips提示效果
2011/04/03 Javascript
jquery Moblie入门—hello world的示例代码学习
2013/01/08 Javascript
jQuery选择器源码解读(一):Sizzle方法
2015/03/31 Javascript
js实现鼠标经过表格行变色的方法
2015/05/12 Javascript
JavaScript实现cookie的写入、读取、删除功能
2015/11/05 Javascript
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
2015/11/30 Javascript
JS判断日期格式是否合法的简单实例
2016/07/11 Javascript
Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法
2017/07/09 Javascript
js实现canvas保存图片为png格式并下载到本地的方法
2017/08/31 Javascript
Parcel.js + Vue 2.x 极速零配置打包体验教程
2017/12/24 Javascript
Vue仿今日头条实例详解
2018/02/06 Javascript
Angular5中调用第三方库及jQuery的添加的方法
2018/06/07 jQuery
webpack之引入图片的实现及问题
2018/10/08 Javascript
vue组件通信传值操作示例
2019/01/08 Javascript
详解vue组件中使用路由方法
2019/02/12 Javascript
微信小程序性能优化之checkSession的使用
2019/03/06 Javascript
详解vue父子组件关于模态框状态的绑定方案
2019/06/05 Javascript
package.json各个属性说明详解
2020/03/11 Javascript
[08:56]DOTA2-DPC中国联赛2月23日Recap集锦
2021/03/11 DOTA
python基于twisted框架编写简单聊天室
2018/01/02 Python
PyGame贪吃蛇的实现代码示例
2018/11/21 Python
Django框架模板介绍
2019/01/15 Python
pycharm配置pyqt5-tools开发环境的方法步骤
2019/02/11 Python
Python turtle画图库&amp;&amp;画姓名实例
2020/01/19 Python
Scrapy框架介绍之Puppeteer渲染的使用
2020/06/19 Python
Python tkinter界面实现历史天气查询的示例代码
2020/08/23 Python
全方位了解CSS3的Regions扩展
2015/08/07 HTML / CSS
意大利时尚奢侈品店:D’Aniello Boutique
2021/01/19 全球购物
秋季婚礼证婚词
2014/01/11 职场文书
幼儿教师工作感言
2014/02/14 职场文书
工伤事故赔偿协议书
2014/04/15 职场文书
解决Pytorch修改预训练模型时遇到key不匹配的情况
2021/06/05 Python