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 相关文章推荐
cnblogs csdn 代码运行框实现代码
Nov 02 Javascript
Javascript中的this绑定介绍
Sep 22 Javascript
javascript中强制执行toString()具体实现
Apr 27 Javascript
SuperSlide2实现图片滚动特效
Jun 20 Javascript
JS与jQuery遍历Table所有单元格内容的方法
Dec 07 Javascript
jquery插件Jplayer使用方法简析
Apr 22 Javascript
微信小程序 安全包括(框架、功能模块、账户使用)详解
Jan 16 Javascript
微信小程序 网络请求(post请求,get请求)
Jan 17 Javascript
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
Oct 19 Javascript
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
Apr 22 Javascript
VueQuillEditor富文本上传图片(非base64)
Jun 03 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
BBS(php &amp; mysql)完整版(七)
2006/10/09 PHP
php获取当前网址url并替换参数或网址的方法
2010/06/06 PHP
ioncube_loader_win_5.2.dll的错误解决方法
2015/01/04 PHP
PHP弱类型语言中类型判断操作实例详解
2017/08/10 PHP
Javascript 检测、添加、移除样式(className)函数代码
2009/09/08 Javascript
测试JavaScript字符串处理性能的代码
2009/12/07 Javascript
读jQuery之六 缓存数据功能介绍
2011/06/21 Javascript
浅析tr的隐藏和显示问题
2014/03/05 Javascript
谈谈AngularJs中的隐藏和显示
2015/12/09 Javascript
创建一个类Person的简单实例
2016/05/17 Javascript
详解Vuex管理登录状态
2017/11/13 Javascript
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
2020/02/14 Javascript
Node.js API详解之 V8模块用法实例分析
2020/06/05 Javascript
js实现列表按字母排序
2020/08/11 Javascript
探索node之事件循环的实现
2020/10/30 Javascript
[10:39]DOTA2上海特级锦标赛音乐会纪录片
2016/03/21 DOTA
[55:44]完美世界DOTA2联赛决赛 FTD vs Phoenix 第二场 11.08
2020/11/11 DOTA
python更新列表的方法
2015/07/28 Python
python的Crypto模块实现AES加密实例代码
2018/01/22 Python
Python多重继承的方法解析执行顺序实例分析
2018/05/26 Python
解决Python pandas df 写入excel 出现的问题
2018/07/04 Python
浅谈python在提示符下使用open打开文件失败的原因及解决方法
2018/11/30 Python
Python paramiko模块使用解析(实现ssh)
2019/08/30 Python
python orm 框架中sqlalchemy用法实例详解
2020/02/02 Python
使用css3实现的windows8开机加载动画
2014/12/09 HTML / CSS
阳光体育:Sunny Sports(购买露营和远足设备)
2018/08/07 全球购物
TCP协议通讯的过程和步骤是什么
2015/10/18 面试题
资源环境与城乡规划管理专业自荐书
2014/09/26 职场文书
车辆委托书范本
2014/10/05 职场文书
2014年检察院个人工作总结
2014/12/09 职场文书
社区好人好事材料
2014/12/26 职场文书
2015年五一劳动节慰问信
2015/03/23 职场文书
淮海战役观后感
2015/06/11 职场文书
银行服务理念口号
2015/12/25 职场文书
母婴行业实体、电商模式全面解析
2019/08/01 职场文书
python turtle绘图
2022/05/04 Python