美文网首页
阻止表单默认的提交行为

阻止表单默认的提交行为

作者: 逐梦余生 | 来源:发表于2019-01-08 11:54 被阅读0次

表单一点击提交按钮(submit)必然跳转页面,如果表单的action为空也会跳转到自己的页面,即效果为刷新当前页。 

如下,可以看到一点击提交按钮,浏览器的刷新按钮闪了一下:

如果想要阻止表单的默认提交事件,有以下几种方法:

1.将<input>标签内按钮类型从type="submit"修改为type="button"

2.表单内的<button>未指定类型时,默认的类型为submit,可以显式的修改为<button type="button">来阻止表单提交

3.利用preventDefault()方法:

4.用onclick点击事件来return false 

讲一下表单提交按钮onclick事件: 

onclick="return true" 为默认的表单提交事件 

onclick="return false"为阻止表单提交事件 

而一般用onclick来调用函数都是没有返回值的,所以一般调用完成后为默认return true;所以才会看到,先处理回调函数后再进行表单提交跳转。

5.利用表单的onsubmit事件 

注意:onsubmit事件的作用对象为<form>,所以把onsubmit事件加在提交按钮身上是没有效果的。 

form对象的onsubmit事件类似onclick,都是先处理调用的函数,再进行表单是否跳转布尔值的判断 

onsubmit="return true" 为默认的表单提交事件 

onsubmit="return false"为阻止表单提交事件

相关文章

  • event.preventDefault和event.stopP

    preventDefault() 方法阻止元素发生默认的行为(例如,当点击提交按钮时阻止对表单的提交)。event...

  • 事件二

    事件中级 什么是事件的默认行为 游览器自身具备的功能,如:提交表单,游览器点击右键会出现菜单, 阻止默认行为:阻止...

  • 事件的方法

    几个常见的事件的方法 preventDefault() 取消事件默认行为,如阻止点击提交按钮时对表单的提交 sto...

  • 阻止表单默认的提交行为

    表单一点击提交按钮(submit)必然跳转页面,如果表单的action为空也会跳转到自己的页面,即效果为刷新当前页...

  • 问题

    vue阻止表单默认行为## 表单会有一个action默认行为方法一: 方法二:把表单换成div 方法三:

  • Js表单提交

    1、表单提交 表单提交是刚开始学js的朋友很迷惑的一个问题,怎么提交,怎么阻止默认提交,怎么提交表单不跳转等等问题...

  • 阻止默认行为

    一。 网页中的元素都有自己的默认行为,比如点击a标签的时候会自动跳转、点击提交按钮后表单会提交,有时我们需要阻止默...

  • form 页面来回跳

    提交表单时,需要阻止默认事件当先校验客户提交的数据,格式是否正确当需要对这些数据进行一个处理再提交就需要先阻止下默...

  • form 阻止表单的默认提交事件 - click 单击事件能够触

    form 阻止表单的默认提交事件 - click 单击事件能够触发 近日 遇到个需求 用 form 的button...

  • 原生阻止表单默认行为的方法(默认提交刷新页面)

    表单一点击提交按钮(submit)必然跳转页面,可以看到一点击提交按钮,浏览器的刷新按钮闪了一下,这就是表单的默认...

网友评论

      本文标题:阻止表单默认的提交行为

      本文链接:https://www.haomeiwen.com/subject/bvevrqtx.html