阻止表单的默认提交事件

编程之家收集整理的这篇文章主要介绍了阻止表单的默认提交事件编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

表单一点击提交按钮(submit)必然@R_100_404@面,如果表单的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" οnclick="func(event)" /> 
    </form>
</body>
</html>
  • 4.用onclick点击事件来return false 

讲一下表单提交按钮onclick事件: 
οnclick="return true" 为默认的表单提交事件 
οnclick="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" οnclick="return func()" /> 
        <!--注意是onclick内是return func();而不是简单的调用func()函数-->
    </form>
</body>
</html>
  • 5.利用表单的onsubmit事件 

注意:onsubmit事件的作用对象为<form>,所以把onsubmit事件加在提交按钮身上是没有效果的。 
form对象的onsubmit事件类似onclick,都是先处理调用函数,再进行表单是否跳转布尔值的判断 
οnsubmit="return true" 为默认的表单提交事件 
οnsubmit="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="" οnsubmit="return func()">
        <input type="submit" value="button" /> 
    </form>
</body>
</html> 

总结

以上是编程之家为你收集整理的阻止表单的默认提交事件全部内容,希望文章能够帮你解决阻止表单的默认提交事件所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
喜欢与人分享编程技术与工作经验,欢迎加入编程之家官方交流群!

相关文章

猜你在找的HTML相关文章

&lt;input type=&quot;text&quot; maxlength=&quot;5&quot; /&gt; 效果ok, 当&#160;&lt;input type=&quot;numb
直接上答案 &lt;style&gt; input[type=&#39;number&#39;]{-moz-appearance:textfield;} input[type=number]::-we
写在前面的话 在使用form表单的时候,一旦点击提交触发submit事件,一般会使得页面跳转,页面间的跳转等行为的控制权往往在后端,后端会控制页面的跳转及数据传递,但是在某些时候不希望页面跳转,或者说
表格是html中经常使用到的,简单的使用可能很多人都没问题,但是更深入的了解的人恐怕不多,下面我们先来看一下如何使用。 是的上层标签必须在一个里面,它不能单独使用,相当于的属性标签.标示一个表格,标示
html实现一些特殊的符号:大于号:>            &gt;小于号:&号:                   &amp;注册号:              &reg:版权:                  &copy;空格号:               &nbsp;
网站图标favicon制作介绍:favicon.ico一般作为缩略的网站标志,他显示于浏览器的地址栏,表示网站的Logo,如下图红圈所示:下面介绍如何由.jpg或者.png图片生成.icon图标:      http://www.bitbug.net/,打开该网址,即可在线将其他格式的图片生成icon格式的图标。一般生成的图标icon的尺寸选择32*32.在html页面中引用i
有的时候,我们的页面有公共的导航栏navbar,公共的脚注footer,那么我们就想把这些公共部分独立成一个html文件,在要引用的地方像引用js,css一样,给包含进来。Apache下开启SSI配置,使html支持include包含,就可以达到该功能。一共4个操作步骤,下面介绍具体的操作:1、加载SSI模块     找到Apache的安装路径,在Apache文件夹下找到conf文
gbk一般用于繁体中文,是国家标准gb2312基础上扩容后兼容gb2312的标准。文字编码(中英文)用双字节编码,是国家编码,通用性比utf8差,但utf8占用的数据库比gbk大gb2312一般用于简体中文utf8----是全球通用,用于解决国际上字符的一种多字节编码,英文使用8位(一个字节),中文使用28位(3个字节)。现在一般都用utf8编码。允许含BOM,但一般不包含BOM。gb