`

阻止表单的默认提交事件的几种解决方案

阅读更多

【前言】

    表单一点击提交按钮(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乱码 N种解决方案

    本文将深入探讨“JSP乱码”的多种解决方案,并提供实用的解决策略。 1. **理解字符编码的基本概念** - 字符编码是计算机对文字进行存储和处理的标准,常见的有ASCII、GBK、UTF-8等。 - JSP页面默认使用ISO-8859-1...

    登陆界面表单提交js特效.zip

    2. **添加事件监听器**:使用JavaScript为表单的提交事件添加监听器,这样当用户点击提交按钮时,可以执行自定义的验证函数。 3. **编写验证函数**:在这个函数中,获取用户输入的值,然后用正则表达式进行匹配和...

    关于layui表单中按钮自动提交的解决方法

    以上是针对layui表单中按钮自动提交的几种解决策略。在实际开发中,选择哪种方法取决于具体需求和场景。重要的是理解HTML表单的行为和layui的form模块的工作原理,这样才能有效地控制表单的提交过程,避免不必要的...

    Dwr 表单提交 时间类型

    描述中提到的博客链接指向了iteye上的一篇文章,尽管具体内容未给出,但可以推测博主可能讨论了在DWR中如何处理日期时间类型的数据,包括可能遇到的问题、解决方案以及最佳实践。通常,这可能涵盖以下几个方面: 1....

    J2EE以GET和POST方式提交表单的乱码解决(受教了)

    `struts2乱码处理.doc`文件很可能包含更具体的Struts2框架下的乱码解决方案,建议查看文档以获取更多细节。 总之,解决J2EE应用中GET和POST方式的乱码问题需要从服务器配置、页面编码以及代码处理三个方面入手,...

    Struts2防止重复提交的解决方案

    ### Struts2防止重复提交的解决方案 #### 一、引言 在Web应用程序开发中,一个常见的问题是如何有效地防止表单的重复提交。这不仅能够提高用户体验,还能增强系统的安全性。Struts2作为一款广泛使用的Java Web应用...

    android防止提交事件时触发多个表单中的按钮

    如果不想改变按钮类型,也可以在`ng-click`事件处理函数中使用`event.stopPropagation()`来阻止事件向上冒泡到父元素,从而避免触发表单提交。在`getPhoto()`函数中添加这一行代码: ```javascript $scope.getPhoto ...

    ie ,火狐 文本框回车自动提交

    1. **禁用`onsubmit`默认行为**:通过设置`onsubmit`属性返回`false`,可以阻止表单的默认提交行为,从而允许我们自定义提交逻辑。 ```html ;"&gt; ``` 2. **添加隐藏的提交按钮**:在表单中添加一个隐藏的提交...

    jquery插件(form表单验证)

    4. **阻止默认行为**:如果在提交表单前有验证失败,插件会阻止表单的默认提交行为,直到所有问题解决。 二、如何使用 使用jQuery表单验证插件通常包括以下几个步骤: 1. **引入jQuery库和插件**:首先,在HTML...

    JQuery实现表单验证

    5. **阻止默认行为**:在验证失败时,通过`.preventDefault()`阻止表单提交,直到所有字段都通过验证。 6. **批量验证**:对于多个字段的验证,可以使用`.each()`遍历所有相关字段并逐一检查。 7. **注册验证**:...

    原生JS实现表单验证带提示留言功能特效源码.zip

    本资源"原生JS实现表单验证带提示留言功能特效源码.zip"提供了一种纯JavaScript实现的解决方案,无需依赖任何外部库如jQuery或AngularJS。这种原生实现方式使得代码更轻量级,同时也锻炼了开发者对JavaScript核心...

    解决kindeditor在使用验证插件下点两次才提交的问题

    为了解决上述问题,可以采取以下几种策略: 1. **调整KindEditor的同步机制**:修改`syncType`属性,使其在用户操作后立即同步编辑器内容,而非等待表单提交。这可以通过将`syncType`设为`input`来实现,这样可以...

    如何去除表单的回车即提交即回车!=提交

    在这个例子中,我们给表单添加了一个事件监听器,当用户在表单内按回车时,阻止了表单的默认提交行为,并可以在此基础上添加自己的提交逻辑。 总的来说,去除表单的回车即提交行为需要对HTML表单控件和事件处理有...

    ThinkPHP 防止表单重复提交的方法

    客户端脚本防止刷新,通常指的是在用户提交表单之后,通过JavaScript或者jQuery来禁用提交按钮或者阻止表单的默认提交行为,以防止用户在表单提交后通过刷新页面导致重复提交。这种方法通常用于一些不需要复杂交互的...

    ThickBox关闭层自动刷新和页面数据提交冲突问题

    // 阻止默认提交行为 $(this).ajaxSubmit({ url: 'your-url', success: function(response) { // 成功处理后端返回的数据 console.log(response); parent.tb_remove(); window.location.reload(); }, ...

    几种常用解决jsp中文乱码的方案

    解决 JSP 中文乱码的方案 JSP 中文乱码是动态网站...解决 JSP 中文乱码的方案有多种,选择哪种方案取决于具体情况。但无论选择哪种方案,都需要确保 JSP 的字符集和数据库的字符集保持一致,以避免中文乱码的出现。

    js 日历控件(两种解决方案)

    JavaScript日历控件是网页开发中常见的一种交互元素,它为用户提供了一个方便的方式来选择日期,常用于表单填充、事件安排或任何需要日期输入的场景。本篇文章将深入探讨两种不同的JavaScript日历控件实现方案,并...

    重复提交和回发或回调参数无效问题

    本文详细探讨了“回调或回传参数无效”及“表单重复提交”这两种不常见的问题及其解决方案。在实际开发过程中,开发者应时刻关注这类隐蔽的问题,并采取有效的措施来预防和解决,以确保系统的稳定性和数据的准确性。

    jsp乱码解决方案大全

    本文详细介绍了JSP开发中常见的几种乱码问题及其解决方案,包括页面显示乱码、表单提交乱码以及数据库操作乱码等问题。通过设置正确的编码格式、合理配置数据库连接以及适当的字符串转换,可以有效解决这些问题,...

Global site tag (gtag.js) - Google Analytics