首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何知道哪个提交按钮触发了onsubmit事件

在前端开发中,可以通过以下几种方式来确定哪个提交按钮触发了onsubmit事件:

  1. 使用事件对象(event object):在onsubmit事件处理函数中,可以通过事件对象来获取触发事件的元素。事件对象提供了target属性,该属性指向触发事件的元素。可以通过判断target属性的值来确定是哪个提交按钮触发了onsubmit事件。

示例代码:

代码语言:javascript
复制
function handleSubmit(event) {
  var target = event.target;
  if (target.id === 'submitButton1') {
    // 第一个提交按钮触发了onsubmit事件
  } else if (target.id === 'submitButton2') {
    // 第二个提交按钮触发了onsubmit事件
  }
}

var form = document.getElementById('myForm');
form.addEventListener('submit', handleSubmit);
  1. 使用表单元素的属性:如果每个提交按钮都有唯一的id属性,可以直接通过id属性来确定是哪个提交按钮触发了onsubmit事件。

示例代码:

代码语言:javascript
复制
function handleSubmit(event) {
  var targetId = event.submitter.id;
  if (targetId === 'submitButton1') {
    // 第一个提交按钮触发了onsubmit事件
  } else if (targetId === 'submitButton2') {
    // 第二个提交按钮触发了onsubmit事件
  }
}

var form = document.getElementById('myForm');
form.addEventListener('submit', handleSubmit);
  1. 使用全局变量:在点击提交按钮时,可以将触发事件的按钮的引用存储在一个全局变量中,在onsubmit事件处理函数中可以直接使用该变量来确定是哪个提交按钮触发了onsubmit事件。

示例代码:

代码语言:javascript
复制
var clickedButton;

function handleButtonClick(event) {
  clickedButton = event.target;
}

function handleSubmit(event) {
  if (clickedButton.id === 'submitButton1') {
    // 第一个提交按钮触发了onsubmit事件
  } else if (clickedButton.id === 'submitButton2') {
    // 第二个提交按钮触发了onsubmit事件
  }
}

var button1 = document.getElementById('submitButton1');
var button2 = document.getElementById('submitButton2');
button1.addEventListener('click', handleButtonClick);
button2.addEventListener('click', handleButtonClick);

var form = document.getElementById('myForm');
form.addEventListener('submit', handleSubmit);

以上是几种常见的确定哪个提交按钮触发了onsubmit事件的方法。根据具体情况选择适合的方式来实现功能。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

基于Taro的微信小程序模板消息-获取formId功能模块封装实践

前言 在微信小程序中,小程序提供了一种能力-模板消息,官方文档是这样描述的:“基于微信的通知渠道,我们为开发者提供了可以高效达用户的模板消息能力,以便实现服务的闭环并提供更佳的体验。”...今天胡哥就给大家来介绍下,如何在小程序中尽可能的获取formId,以达到让服务端有尽可能多的formId来发送模板消息。...事件,就可以获取到formID; 同时借助CSS样式,我们可以将form组件和button组件设置成隐形的,不可见但确真实存在; 将隐形的button组件覆盖在真实的组件上,当点击真实组件时,实际上就触发了...) { let { children } = this.props return ( <Form className="form" reportSubmit="true" onSubmit...获取formId效果图 后记 以上就是胡哥今天给大家分享的内容,喜欢的小伙伴记得收藏、转发、点击右下角按钮在看,推荐给更多小伙伴呦,欢迎多多留言交流... 胡哥有话说,一个有技术,有情怀的胡哥!

1.9K20
  • JavaWeb——JavaScript精讲之事件监听机制与表单校验案例实战

    事件源:组件,如按钮、文本输入框; 监听器:代码。 注册监听:将事件事件源、监听器结合在一起,当事件源上发生了某个事件,则触发执行某个监听代码。...2、onfocus:元素获得焦点 3)加载事件:1、onload:一张页面或一幅图像加载完成 4)鼠标事件:1、onmousedown:鼠标按钮被按下,定义方法时,定义一个形参接受event对象,event...的属性可以获取鼠标哪个键被点击了(左键0,中键1,右键2)                       2、onmousemove:鼠标被移动                       3、onmouseout...1、onsubmit 确认按钮被点击,方法返回false,则阻止表单提交                       2、onreset 重置按钮被点击 【举例】基本事件示例 <!...事件 document.getElementById("form").onsubmit = function () { //校验用户名格式

    83220

    如何测试 React 异步组件?

    前言 本文承接上文 如何测试驱动开发 React 组件?,这次我将继续使用 @testing-library/react 来测试我们的 React 应用,并简要简要说明如何测试异步组件。...异步组件的测试内容 我们知道异步请求主要用于从服务器上获取数据,这个异步请求可能是主动触发的,也可能是(鼠标)事件响应,本文主要包含 2 方面内容: 如何测试在 componentDidMount 生命周期中发出的异步请求...如何测试(鼠标)事件发出的异步请求 ? ---- 对于异步组件,有两件步骤需要进行测试: 第一:测试异步方法本身有没有被调用,并且传了正确的参数。 第二:在调用之后,应用程序应该做出响应。...测试登录成功 由于测试登录成功的例子已经包含了"测试提交"和"测试渲染"的功能,所以,可以将前面2个单元测试删除。登录后,按钮改成 loading 状态 disabled。...测试用例: 失败后文档中显示服务端的消息 失败后按钮又显示登录并且可以点击 test("onSubmit failures", async () => { const message = "账号或密码错误

    3.3K50

    如何优雅的在业务中使用设计模式(代码如诗)

    type明确:不同类型弹出不同弹窗,按钮执行不同逻辑 抽象行为明确:一个按钮就是一种行为,不同行为的实现逻辑大相径庭 抽象行为 多样弹窗的行为抽象,对应其按钮就行了 确定、取消、同意、拒绝、查看详情、我知道了...FiveStrategy(); break; default: strategy = DefaultStrategy(); break; } //聚合弹窗按钮触发事件...(不同弹窗的确定按钮,皆可聚合为一个onConfirm事件,其它同理) BusinessDialog( //通过传入的type,显示对应类型的弹窗 type: type, /...//我知道按钮 onKnow: () { strategy.onKnow(); }, //提交按钮 onSubmit: () { strategy.onSubmit...//经历了N多逻辑 //提交按钮触发事件 SubmitBtn( //提交按钮 onSubmit: () { intercepts.onSubmit("传入提交数据"

    1.2K93

    文档和元素的几何滚动

    web服务器的字符串 表单和元素的事件处理程序 每个form元素都有一个onsubmit事件处理程序用来检测表单提交。...还有一个onreset事件处理程序来检测表单的重置。表单提交前将会调用onsubmit程序,如果回调函数的返回值为false则会取消表单的提交动作。这是js程序一个用来检查用户的输入错误。...目的是避免不完整或者无效的数据通过网络提交到服务端程序。onsubmit事件只能通过单击提交按钮触发。...)进行提交,将会在提交前触发onsubmit事件。...使用场景:对用户表单进行输入的验证 具体的后面有事件,继续写。 其过程如下 先触发onsubmit事件 → 接着调用submit()方法完成提交

    5.2K00

    AngularDart4.0 指南- 表单 顶

    知道如何从早期的页面做到这一点。 显示数据教导属性绑定。 用户输入显示如何使用事件绑定监听DOM事件以及如何使用显示的值更新组件属性。 现在您需要同时显示,聆听和提取。...model.power = _powers[0]; model.alterEgo = ''; } 在提交按钮后面添加一个带有点击事件绑定的清除按钮:lib/src/hero_form_component.html...为了使它有用,将表单组件的onSubmit()方法分配给表单的ngSubmit事件绑定: 请注意模板引用变量...提交的标志变为真,表格消失。 您将看到表格中显示的英雄模型值(只读)。 ? 该视图包含一个编辑按钮,其单击事件绑定将清除提交的标志。 当您单击编辑按钮时,该表消失,并且可编辑的表单重新出现。...在此页面中,您学习了如何使用以下功能: 一个HTML表单模板和一个带有@Component注解的表单组件类。 表单提交,通过ngSubmit事件绑定处理。

    17.5K30

    React 新 hook:useFormStatus 使用详解

    我们可以利用这个值的变化在提交按钮上设置 Loading 样式 data 格式为 FormData,表示此次提交里表单的所有内容。...3、案例一:提交时设置禁用按钮 为了防止重复提交,我们希望在提交时就马上禁用按钮,等到提交完成之后再恢复按钮的点击。...与此同时,我们可能还需要在 UI 交互上做出一些提示,让用户知道当前正在发送请求 交互效果如下 这里主要是针对提交按钮做的操作,因此我们需要单独将提交按钮相关的部分拿出来封装成为一个子组件,并在子组件中利用...这里我们需要注意的是 action 与 onSubmit 的区别。onSubmit 会优先于 action 执行。...具体如何抉择大家需要根据自身项目的需求情况来定。

    25210

    form 元素是 React 的未来

    Server Action 「根据前端用户输入保存数据到后端」的常见场景是「表单提交」,通常我们会在form的onSubmit事件中做后续处理: function Form() { function...当提交表单(比如点击type为submit的按钮)后formData会提交给该url。...比如,在「点赞」的场景,通常逻辑是: 点击点赞按钮 发起点赞请求 点赞成功,前端显示点赞效果 但为了用户体验的流畅,前端通常会把逻辑做成: 点击点赞按钮 前端显示点赞效果(同时发起点赞请求) 根据请求结果...,如果点赞成功则不做处理,如果点赞失败则重置按钮 useOptimistic的本质就是在状态层面实现上述效果。...{pending} formAction={action}> {children} ); } 有同学可能会疑惑:useFormStatus没有传参,他怎么知道对应哪个

    31730

    HTML事件属性--DOM

    () { alert("图片出错") } 1.gif不存在,因此触发了一个myfun()事件,弹出窗口 demo查看 4.onhashchange 当文档改变时发生的脚本...当表单被提交时触发 要把事件绑定到form标签里面 function myfun() { alert('提交了') } demo查看 注意:提交了之后会自动刷新页面,...document和console的触发内容会立刻刷新,一闪而过,只有alert能停留在页面上,等待点击确定 三、key键盘事件 1.onkeydown 按下任意键时触发,包括系统按钮,箭头和功能键 demo...查看 2.onkeypress 按下任意字母数字键时触发,但系统按钮,箭头和功能无法识别 3.onkeyup 松开任何之前按下的键盘时触发 demo查看 四、mouse鼠标事件 利用鼠标触发的事件 1.

    3.8K20

    js – form表单提交不刷新

    大家已经发现了, 当我们点击submit提交form表单的时候, 他会刷新一次, 如果不想它刷新的话有下面两种方法: 利用iframe 我们可以利用一个隐藏的iframe来实现, 主要是我们把提交目标放到一个隐藏的..." /> 利用onsubmit事件...我们还可以绑定onsubmit事件(用jq的话是submit()), 在submit按钮效果触发之前我们就把数据提交了, 然后我们return false(让submit这次的点击触发事件失效, 否则表单又会提交一次...我们在绑定onsubmit的时候是把return false放进onsubmit后面的调用函数内的, 这样子如果你的函数出现了错误, 将不会继续执行到函数最后’return false’这里, 还是会出现刷新的现象...; 我们应该把return false写到绑定事件中.

    14.5K10

    剥开比原看代码09:通过dashboard创建密钥时,前端的数据是如何传到后端的?

    那么本文就将研究一下,当我们点击了"Register"按钮以后,我们在前端页面上填写的参数,到底是如何一步步的传到比原的后端的。...跟之前一样,我们将对这个问题进行细分,然后各个击破: 前端:当我们填完表单,点了提交以后,比原在前端是如何发送数据的? 后端:比原的后端是如何接收到数据的?...前端:当我们填完表单,点了提交以后,数据会发送到后端的哪个接口? 当我们点击了"Register"按钮,在前端页面中,一定会在某个地方触发一个向比原节点webapi接口发出请求的操作。...究竟是访问的哪个web api?提交的数据又是什么样的呢?让我们先从前端代码中寻找一下。 注意,比原的前端代码位于另一个项目仓库bytom/dashboard中。...这里需要关注的是每个TextField的fieldProps属性,它对应我们提交到后台的数据的name 就是那个“Register”按钮了。

    78610

    form实现表单提交的各种方法(表单提交源码)

    javacript函数来提交表单,方法就非常多非常灵活了,比如可以把它加入到任意一个标签的onclick事件中: ...比如一个表单里的提交按钮所指向的处理页面不同,这样由于表单在定义的时候就已经确定下表单数据的处理页面,所以单纯地在表单里放多个提交按钮是没有办法达到目的的。这就需要javascript。...,而提交功能的实现方法是在它的onclick事件中调用javascript函数....当不写type属性时,其type的默认值是submit,点击的话也会直接提交数据 使用form的onsubmit()方法对表单数据进行 验证后 再提交 <form id="form1" action="...()方法,它会在“<em>提交</em>”<em>按钮</em>点击的时候被触发,该方法一定要有return返回值,如果值为false则不进行<em>提交</em>,如果为true则<em>提交</em>。

    5.3K30
    领券