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 使用手册(三)
Sep 23 Javascript
基于jquery的文字向上跑动类似跑马灯的效果
Sep 22 Javascript
javascript实现粘贴qq截图功能(clipboardData)
May 29 Javascript
全面理解JavaScript中的继承(必看)
Jun 16 Javascript
Select下拉框模糊查询功能实现代码
Jul 22 Javascript
BootStrap入门教程(三)之响应式原理
Sep 19 Javascript
js如何判断是否在iframe中及防止网页被别站用iframe嵌套
Jan 11 Javascript
二维码图片生成器QRCode.js简单介绍
Aug 18 Javascript
vue el-table实现自定义表头
Dec 11 Javascript
解决vue net :ERR_CONNECTION_REFUSED报错问题
Aug 13 Javascript
vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作
Sep 12 Javascript
解决antd 下拉框 input [defaultValue] 的值的问题
Oct 31 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学习笔记之三 数据库基本操作
2011/01/17 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十四)
2014/06/26 PHP
jQuery 常见学习网站与参考书
2009/11/09 Javascript
jq实现酷炫的鼠标经过图片翻滚效果
2014/03/12 Javascript
基于jquery的文字向上跑动类似跑马灯的效果
2014/09/22 Javascript
javascript数组随机排序实例分析
2015/07/22 Javascript
实例讲解js验证表单项是否为空的方法
2016/01/09 Javascript
JS中Eval解析JSON字符串的一个小问题
2016/02/21 Javascript
javascript的理解及经典案例分析
2016/05/20 Javascript
详解如何较好的使用js
2016/12/16 Javascript
JS实现百度搜索接口及链接功能实例代码
2018/02/02 Javascript
详解@Vue/Cli 3 Invalid Host header 错误解决办法
2019/01/02 Javascript
vue使用keep-alive保持滚动条位置的实现方法
2019/04/09 Javascript
详解JS实现简单的时分秒倒计时代码
2019/04/25 Javascript
Vue路由守卫之路由独享守卫
2019/09/25 Javascript
Vue2.0 实现页面缓存和不缓存的方式
2019/11/12 Javascript
基于JS+HTML实现弹窗提示是否确认提交功能
2020/06/17 Javascript
详解vue中在父组件点击按钮触发子组件的事件
2020/11/13 Javascript
[01:52]深扒TI7聊天轮盘语音出处7
2017/05/11 DOTA
Python基于回溯法子集树模板解决数字组合问题实例
2017/09/02 Python
详解python string类型 bytes类型 bytearray类型
2017/12/16 Python
Python Unittest自动化单元测试框架详解
2018/04/04 Python
Python3.8中使用f-strings调试
2019/05/22 Python
Python实现线性判别分析(LDA)的MATLAB方式
2019/12/09 Python
Python OpenCV中的numpy与图像类型转换操作
2020/12/11 Python
新加坡最受追捧的体验平台:Hapz
2018/01/01 全球购物
网上卖盒饭创业计划书
2014/01/26 职场文书
经营管理策划方案
2014/05/22 职场文书
法人代表证明书
2014/09/18 职场文书
义诊活动通知
2015/04/24 职场文书
给朋友的赠语
2015/06/23 职场文书
《所见》教学反思
2016/02/23 职场文书
2019最新版试用期劳动合同模板!
2019/07/04 职场文书
pytorch显存一直变大的解决方案
2021/04/08 Python
redis通过6379端口无法连接服务器(redis-server.exe闪退)
2021/05/08 Redis
用python修改excel表某一列内容的操作方法
2021/06/11 Python