【前言】
表单一点击提交按钮(submit)必然跳转页面,如果表单的action为空也会跳转到自己的页面,即效果为刷新当前页。 如下,可以看到一点击提交按钮,浏览器的刷新按钮闪了一下:
【主体】
如果想要阻止表单的默认提交事件,有以下几种方法:
(1)将<input>标签内按钮类型从type="submit"修改为type="button"
(2)表单内的<button>未指定类型时,默认的类型为submit,可以显式的修改为<button type="button">来阻止表单提交
(3)利用preventDefault()方法:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> function func(event){ event.preventDefault(); } </script> </head> <body> <form action=""> <input type="submit" value="button" onclick="func(event)" /> </form> </body> </html>
(4)用onclick点击事件来return false ,讲一下表单提交按钮onclick事件:
onclick="return true" 为默认的表单提交事件 onclick="return false"为阻止表单提交事件
而一般用onclick来调用函数都是没有返回值的,所以一般调用完成后为默认return true;所以才会看到,先处理回调函数后再进行表单提交跳转。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> function func(){ return false; } </script> </head> <body> <form action=""> <input type="submit" value="button" onclick="return func()" /> <!--注意是onclick内是return func();而不是简单的调用func()函数--> </form> </body> </html>
(5)利用表单的onsubmit事件
注意:onsubmit事件的作用对象为<form>,所以把onsubmit事件加在提交按钮身上是没有效果的。
form对象的onsubmit事件类似onclick,都是先处理调用的函数,再进行表单是否跳转布尔值的判断
onsubmit="return true" 为默认的表单提交事件 onsubmit="return false"为阻止表单提交事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> function func(){ return false; } </script> </head> <body> <form action="" onsubmit="return func()"> <input type="submit" value="button" /> </form> </body> </html>
.
相关推荐
本文将深入探讨“JSP乱码”的多种解决方案,并提供实用的解决策略。 1. **理解字符编码的基本概念** - 字符编码是计算机对文字进行存储和处理的标准,常见的有ASCII、GBK、UTF-8等。 - JSP页面默认使用ISO-8859-1...
2. **添加事件监听器**:使用JavaScript为表单的提交事件添加监听器,这样当用户点击提交按钮时,可以执行自定义的验证函数。 3. **编写验证函数**:在这个函数中,获取用户输入的值,然后用正则表达式进行匹配和...
以上是针对layui表单中按钮自动提交的几种解决策略。在实际开发中,选择哪种方法取决于具体需求和场景。重要的是理解HTML表单的行为和layui的form模块的工作原理,这样才能有效地控制表单的提交过程,避免不必要的...
描述中提到的博客链接指向了iteye上的一篇文章,尽管具体内容未给出,但可以推测博主可能讨论了在DWR中如何处理日期时间类型的数据,包括可能遇到的问题、解决方案以及最佳实践。通常,这可能涵盖以下几个方面: 1....
`struts2乱码处理.doc`文件很可能包含更具体的Struts2框架下的乱码解决方案,建议查看文档以获取更多细节。 总之,解决J2EE应用中GET和POST方式的乱码问题需要从服务器配置、页面编码以及代码处理三个方面入手,...
### Struts2防止重复提交的解决方案 #### 一、引言 在Web应用程序开发中,一个常见的问题是如何有效地防止表单的重复提交。这不仅能够提高用户体验,还能增强系统的安全性。Struts2作为一款广泛使用的Java Web应用...
如果不想改变按钮类型,也可以在`ng-click`事件处理函数中使用`event.stopPropagation()`来阻止事件向上冒泡到父元素,从而避免触发表单提交。在`getPhoto()`函数中添加这一行代码: ```javascript $scope.getPhoto ...
1. **禁用`onsubmit`默认行为**:通过设置`onsubmit`属性返回`false`,可以阻止表单的默认提交行为,从而允许我们自定义提交逻辑。 ```html ;"> ``` 2. **添加隐藏的提交按钮**:在表单中添加一个隐藏的提交...
4. **阻止默认行为**:如果在提交表单前有验证失败,插件会阻止表单的默认提交行为,直到所有问题解决。 二、如何使用 使用jQuery表单验证插件通常包括以下几个步骤: 1. **引入jQuery库和插件**:首先,在HTML...
5. **阻止默认行为**:在验证失败时,通过`.preventDefault()`阻止表单提交,直到所有字段都通过验证。 6. **批量验证**:对于多个字段的验证,可以使用`.each()`遍历所有相关字段并逐一检查。 7. **注册验证**:...
本资源"原生JS实现表单验证带提示留言功能特效源码.zip"提供了一种纯JavaScript实现的解决方案,无需依赖任何外部库如jQuery或AngularJS。这种原生实现方式使得代码更轻量级,同时也锻炼了开发者对JavaScript核心...
为了解决上述问题,可以采取以下几种策略: 1. **调整KindEditor的同步机制**:修改`syncType`属性,使其在用户操作后立即同步编辑器内容,而非等待表单提交。这可以通过将`syncType`设为`input`来实现,这样可以...
在这个例子中,我们给表单添加了一个事件监听器,当用户在表单内按回车时,阻止了表单的默认提交行为,并可以在此基础上添加自己的提交逻辑。 总的来说,去除表单的回车即提交行为需要对HTML表单控件和事件处理有...
客户端脚本防止刷新,通常指的是在用户提交表单之后,通过JavaScript或者jQuery来禁用提交按钮或者阻止表单的默认提交行为,以防止用户在表单提交后通过刷新页面导致重复提交。这种方法通常用于一些不需要复杂交互的...
// 阻止默认提交行为 $(this).ajaxSubmit({ url: 'your-url', success: function(response) { // 成功处理后端返回的数据 console.log(response); parent.tb_remove(); window.location.reload(); }, ...
解决 JSP 中文乱码的方案 JSP 中文乱码是动态网站...解决 JSP 中文乱码的方案有多种,选择哪种方案取决于具体情况。但无论选择哪种方案,都需要确保 JSP 的字符集和数据库的字符集保持一致,以避免中文乱码的出现。
JavaScript日历控件是网页开发中常见的一种交互元素,它为用户提供了一个方便的方式来选择日期,常用于表单填充、事件安排或任何需要日期输入的场景。本篇文章将深入探讨两种不同的JavaScript日历控件实现方案,并...
本文详细探讨了“回调或回传参数无效”及“表单重复提交”这两种不常见的问题及其解决方案。在实际开发过程中,开发者应时刻关注这类隐蔽的问题,并采取有效的措施来预防和解决,以确保系统的稳定性和数据的准确性。
本文详细介绍了JSP开发中常见的几种乱码问题及其解决方案,包括页面显示乱码、表单提交乱码以及数据库操作乱码等问题。通过设置正确的编码格式、合理配置数据库连接以及适当的字符串转换,可以有效解决这些问题,...