返回顶部
首页 > 资讯 > 前端开发 > node.js >JavaScript在form表单中如何使用button按钮实现submit提交方法
  • 952
分享到

JavaScript在form表单中如何使用button按钮实现submit提交方法

2024-04-02 19:04:59 952人浏览 八月长安
摘要

这篇文章将为大家详细讲解有关javascript在fORM表单中如何使用button按钮实现submit提交方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。submit

这篇文章将为大家详细讲解有关javascript在fORM表单中如何使用button按钮实现submit提交方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

submit是button的一个特例,也是button的一种,它把提交这个动作自动集成了,submit和button,二者都以按钮的形式展现,看起来都是按钮,所不同的是type属性和处发响应的事件上。

在javaScript中关于submit和button的区别介绍

 在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提交方法”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

--结束END--

本文标题: JavaScript在form表单中如何使用button按钮实现submit提交方法

本文链接: https://lsjlt.com/news/72667.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • JavaScript在form表单中如何使用button按钮实现submit提交方法
    这篇文章将为大家详细讲解有关JavaScript在form表单中如何使用button按钮实现submit提交方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。submit...
    99+
    2024-04-02
  • yii中form表单提交之前JS如何在提交按钮上进行验证
    这篇文章主要介绍yii中form表单提交之前JS如何在提交按钮上进行验证,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完! 很多时候,需要对Yii表单model中的对象设置的r...
    99+
    2024-04-02
  • 如何使用Ajax方法实现Form表单的提交
    这篇文章主要介绍了如何使用Ajax方法实现Form表单的提交,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。常见的form表单提交方式<...
    99+
    2024-04-02
  • 在SpringMVC中使用bean如何实现接收form表单提交的参数
    今天就跟大家聊聊有关在SpringMVC中使用bean如何实现接收form表单提交的参数,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。使用bean来接收form表单提交的参数时,po...
    99+
    2023-05-31
    springmvc form bean
  • layui如何使用button按钮实现点击出现弹层、弹层中加载表单
    小编给大家分享一下layui如何使用button按钮实现点击出现弹层、弹层中加载表单,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧...
    99+
    2024-04-02
  • 使用AjaxSubmit()方法怎么实现Form提交表单后回调功能
    今天就跟大家聊聊有关使用AjaxSubmit()方法怎么实现Form提交表单后回调功能,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。2.    ...
    99+
    2023-06-08
  • 如何使用JavaWeb实现表单提交
    这篇文章主要介绍如何使用JavaWeb实现表单提交,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!register.html<!DOCTYPE html PUBLIC "-...
    99+
    2023-06-29
  • 如何实现Jquery基于Ajax方法自定义无刷新提交表单Form
    本篇内容主要讲解“如何实现Jquery基于Ajax方法自定义无刷新提交表单Form”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“如何实现Jquery基于Ajax...
    99+
    2024-04-02
  • PHP中如何使用onsubmit方法提交表单数据
    在前端开发中,有许多方法可以提交表单数据到后端服务器。其中,最常见的方法是使用表单的 onsubmit 方法来执行提交操作。这篇文章将介绍在 PHP 中如何使用 onsubmit 方法提交表单数据,并给出一些实例来帮助读者加深理解。一、基本...
    99+
    2023-05-14
  • 纯javascript中ajax如何实现php异步提交表单
    这篇文章将为大家详细讲解有关纯javascript中ajax如何实现php异步提交表单,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。很多时候需要异步提交表单,当表单太多是时候,一个个getElementB...
    99+
    2023-06-08
  • layui中如何实现form表单提交之后重新加载数据表格
    小编给大家分享一下layui中如何实现form表单提交之后重新加载数据表格,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!如下图,...
    99+
    2024-04-02
  • 如何使用Ajax实现表单提交及后台处理
    这篇文章主要为大家展示了“如何使用Ajax实现表单提交及后台处理”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何使用Ajax实现表单提交及后台处理”这篇文章吧...
    99+
    2024-04-02
  • Bootstrap中如何实现下拉菜单、多级菜单及按钮布局方法
    小编给大家分享一下Bootstrap中如何实现下拉菜单、多级菜单及按钮布局方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!下拉...
    99+
    2024-04-02
  • 如何实现axios发送post请求以及提交图片类型表单数据方法
    这篇文章给大家分享的是有关如何实现axios发送post请求以及提交图片类型表单数据方法的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。DOME<input typ...
    99+
    2024-04-02
  • JavaScript中如何使用reduce实现数组map方法
    这篇文章主要介绍了JavaScript中如何使用reduce实现数组map方法,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家...
    99+
    2024-04-02
  • 如何在Java中使用equals()方法实现重写
    如何在Java中使用equals()方法实现重写?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。Java中equals()方法重写实现代码  Java中的equals(...
    99+
    2023-05-31
    java equals() 重写
  • 在SpringBoot中,如何使用Netty实现远程调用方法总结
    Netty Netty是一个NIO客户端服务器框架: 它可快速轻松地开发网络应用程序,例如协议服务器和客户端。 它极大地简化和简化了网络编程,例如TCP和UDP套接...
    99+
    2024-04-02
  • 如何在Android中使用Fab(FloatingActionButton)方法实现一个滑动渐变效果
    本篇文章为大家展示了如何在Android中使用Fab(FloatingActionButton)方法实现一个滑动渐变效果,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。Promoted Actions...
    99+
    2023-05-31
    android fab(floatingactionbutton) roi
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作