Javascript的submit提交事件

最新推荐文章于 2024-02-07 08:43:17 发布

原创最新推荐文章于 2024-02-07 08:43:17 发布 · 947 阅读

0 ·

CC 4.0 BY-SA版权

本文讨论了在Javascript中使用return false防止表单重复提交的问题。当在按钮点击事件中执行自定义提交逻辑时，若不阻止默认行为，会导致表单被多次提交。

Javascript 中 return false 的重要性

关键字: javascript

最近做的项目，通过绑定在 button 的 onclick 事件的函数提交表单。发现 return false 也是很重要的。比如：

Js代码

<input type="submit" onclick="submitAction(); return false;" />

submitAction 方法里面有提交表单的动作。如果不加 return false，在执行完 submitAction 之后，submit 按钮还会继续执行它的默认事件，就会再次提交表单。这可能就是很多错误的根源。

补充: <input type="image" ... />如果不加 return false 也跟"submit"一样会提交表单

原本想把这个东西说的再清楚些，无奈 JS 的书看的不多，而且还有很多工作要做，所以简单说说了。

andycui 2 分钟前

直接把type="button"应该就不会再次提交了吧。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

飞飞的魔毯小窝

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

jQuery中的Submit方法：使用jQuery处理表单提交事件

2301_79325339的博客

10-04

1257

在jQuery中，有一个非常有用的方法叫做Submit，用于处理表单提交事件。通过以上代码示例，我们可以看到Submit方法的基本用法以及如何在表单提交时执行特定的操作。根据具体需求，可以在Submit事件处理函数中进行各种自定义逻辑，以实现更复杂的表单交互功能。在Submit事件处理函数中，可以执行各种操作，例如验证用户输入、发送表单数据到服务器或执行其他自定义逻辑。方法，我们将表单数据序列化为一个字符串，并作为POST请求的数据发送到服务器。方法来阻止表单的默认提交行为，从而可以自定义表单的提交行为。

精选资源

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

01-19

submit是button的一个特例，也是button的一种，它把提交这个动作...使用button按钮实现submit提交，需要在button标签中的使用onclick方法，然后在JavaScript中实现具体，代码如下： <head> [removed] functio

参与评论您还未登录，请先登录后发表或查看评论

Javascript 中 return false 的重要性

「理」尚往来

12-09

339

最近做的项目，通过绑定在 button 的 onclick 事件的函数提交表单。发现 return false 也是很重要的。比如： <input type="submit" onclick="submitAction(); return false;" /> submitAction 方法里面有提交表单的动作。如果不加 return false，在执行完 submitActi...

JS定义网页表单提交（submit）的方法

01-21

本文实例讲述了JS定义网页表单提交（submit）的方法。分享给大家供大家参考。具体如下：这段代码表示网页表单提交时不是提交到指定的页面，而是执行一个特定的函数 [removed] function saveInfo() { localStorage.setItem(name,$(#name).val()); } [removed] <form id=register onSubmit=return saveInfo()> <label for=name>Name:</label> <input type=text name=name id=name> <input

javaScript 中的return和return false

diandi5157的博客

04-28

170

在一段JS代码中，在条件满足的时候用return跳出循环例如： ...... var cList = $(thisEle).parent().find(".CList"); if(cList.length>0){ cList.show(); return false; }else{ cList = $("<div ...

javascript 提交 submit

weixin_30514745的博客

11-12

144

onclick="javascript:$('#form').submit()" 转载于:https://www.cnblogs.com/henry-xu/p/6056754.html

表单Form的submit事件不响应的解决方法

12-10

虽然用submit方法来提交表单有违Unobtrustive Javascript的原则，但有时候不得不用，比如做搜索提示（auto-complete)选中Item之后就需要用JS来提交搜索表单。二、问题分析既然本身不响应事件，那只有手工触发这些...

js表单提交和submit提交的区别实例分析

10-23

使用JavaScript提交表单时，可以通过`document.getElementById('formID').submit()`方法，直接触发表单的提交事件。这种方式不会触发表单的`onsubmit`事件，也不会执行提交按钮的`onclick`事件处理器。此外，...

简述JavaScript提交表单的方式（Using JavaScript Submit Form）

10-22

主要介绍了简述JavaScript提交表单的方式（Using JavaScript Submit Form）的相关资料,需要的朋友可以参考下

浅谈layui 绑定form submit提交表单的注意事项

10-16

2. 使用`lay-filter`属性来标识特定的提交事件，以便在JavaScript中精确监听和处理。 3. 在监听事件的回调函数中，可以通过返回`false`来阻止表单的默认提交，实现自定义的提交逻辑。理解并正确使用这两个属性，...

JS--JavaScript提交表单（submit事件）、重置表单、取消默认提交表单（单击按钮、回车）

热门推荐

吴声子夜歌的博客

09-27

1万+

提交表单使用< input > 或 < button >标签都可以定义提交按钮，只要将type属性值设置为“submit”即可，而图像按钮则是通过将 < input >的type属性值设为“image”。当单击按钮或图像按钮时，就会提交表单。 submit事件类型仅在表单内提交按钮，或者在文本框中输入文本时按回车键触发。示例1：单击【提交】按钮后，触发sub...

js submit提交表单问题

求生记

12-10

200

代码如下： [quote][/quote] 或者 [quote][/quote] 当提交按钮的name 或者 id为submit时候，用js 提交表单，表单名.submit()时候会报一个错误，提示对象不支持此属性或办法。解决方法是修改提交按钮的 name 或者 id 不要与 submit同名即可。那么，请问为什么当提交按钮的 name 或者 id为submit或者 ...

JavaScript之return false

Jancy的博客

02-27

1718

js中用return false 阻止默认行为方式1：有效<div> <a href="www.baidu.com">sfdhsdh</a> </div> <script> var elem=document.querySelector('a'); elem.onclick=function(){return false;} //或者elem.onclick=ab

JavaScript表单：事件和方法提交

爱蹦跶的全栈大A阿

02-07

1401

表单提交是 web 开发中常见的功能，用于将用户输入的数据发送到服务器。本文介绍了表单提交的流程、两种方式、使用form元素和 JavaScript 提交表单、阻止表单提交以及获取表单数据等主题，并提供了一些代码示例。希望本文对你有所帮助！阅读 HTML 和 JavaScript 文档，以了解更多关于表单提交的信息。练习使用不同的方式提交表单。在实际项目中使用表单提交功能。祝你学习愉快！。

js的submit()方法详解

mengshan1986的专栏

10-15

8345

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">杂志缩略图管理 function testa(){document.getElementById("forma").action="www.ba.com";document.getElementById("forma").su

JavaScript中的submit和button

sinat_40880767的博客

07-25

785

submit按钮，一旦点击默认提交表单； button按钮，通常用于触发事件，通过onclick指定事件处理函数。如果表单在点击提交按钮后需要用js进行处理（例如：用户名、密码的验证）后再提交的话，通常要把submit改成button，避免submit自动提交的行为，否则就会造成提交两次的结果。 ...

麻烦的 Javascript 的 Submit 功能

joe83004的专栏

03-13

974

想实现的功能：防止多次按下“提交”。即按下“提交”按钮后，这个按钮变为无效，并且提交表单。环境：需要在 Firefox 和 IE6.0 和 7.0 里面实现。解决方案：Submit" type="submit" id="Submit" value="提交" onclick="this.disabled=true; document.all.userinfo.submit();

js 控制 form action submit

hzwangzi123456的博客

04-06

1034

<form id="form01" class="form-horizontal" action="" style="margin-left:400px;margin-top:250px"> 竹林环境监测智能平台账号 <input class="form-control" id="input01" name="username" placeholde

submit提交事件

最新发布

05-13

### HTML Form Submit 事件的使用方法与解决方案 #### 1. 基本概念 `submit` 是 HTML 表单中的一个重要事件，当用户点击 `<form>` 中的提交按钮或者按下回车键时触发此事件。如果需要执行一些额外的操作（如数据验证），可以在 `submit` 事件中编写 JavaScript 来处理。然而，在某些情况下，直接调用 `form.submit()` 方法可能会绕过绑定的 `submit` 事件监听器[^1]。这是因为 `form.submit()` 只是一个简单的 DOM API 调用，它不会触发实际的 `submit` 事件。 --- #### 2. 正确绑定 `submit` 事件的方式为了确保能够捕获并响应 `submit` 事件，可以通过以下方式绑定： ```javascript document.querySelector('form').addEventListener('submit', function(event) { event.preventDefault(); // 阻止默认行为 console.log('Submit Event Triggered'); }); ``` 上述代码片段展示了如何通过 `addEventListener` 绑定 `submit` 事件，并利用 `event.preventDefault()` 防止表单自动提交[^2]。 --- #### 3. 解决 `submit` 不被触发的问题如果发现 `submit` 事件未按预期工作，可能是因为以下原因之一： - **直接调用了 `form.submit()`** 如前所述，`form.submit()` 不会触发 `submit` 事件。因此，建议改用模拟用户的交互操作来触发事件，例如： ```javascript const form = document.querySelector('form'); form.dispatchEvent(new Event('submit')); // 手动派发 submit 事件 ``` - **iOS 设备上的兼容性问题** 在 iOS 特定版本中，`event.preventDefault()` 对于 `submit` 事件可能存在失效情况。此时可以考虑替代方案，比如移除原生表单结构或更改按钮的行为[^3]。 --- #### 4. 替代方案：自定义按钮代替 `<form>` 为了避免潜在的兼容性问题，推荐采用如下做法： - 将按钮类型更改为 `type="button"` 并手动控制逻辑。 - 移除 `<form>` 默认功能，完全依赖 JavaScript 实现提交过程。以下是具体实现示例： ```html <form id="myForm"> <input type="text" name="username" /> </form> <button onclick="handleSubmit()">Custom Submit Button</button> <script> function handleSubmit() { const formData = new FormData(document.getElementById('myForm')); fetch('/api/endpoint', { method: 'POST', body: formData }) .then(response => response.json()) .then(data => console.log(data)); } </script> ``` 在此例子中，`<button>` 完全独立于 `<form>`，从而避免了任何意外的默认行为。 --- #### 5. 数据验证的最佳实践无论采取哪种形式的提交机制，都应优先完成客户端的数据验证。这不仅提升了用户体验，还减少了不必要的服务器负载。例如： ```javascript document.querySelector('form').addEventListener('submit', function(event) { const usernameInput = document.querySelector('#username'); if (!usernameInput.value.trim()) { alert('Username is required!'); event.preventDefault(); } }); ``` 该脚本检查输入框是否为空，如果不满足条件则阻止提交动作。 --- ### 总结通过对 `submit` 事件的理解以及合理运用 JavaScript 控制流，可以有效解决各种场景下的表单提交难题。无论是修复现有 bug 还是优化性能体验，都需要综合考量跨平台一致性及用户需求。