阻止form默认行为刷新页面

污斑兔

于 2024-09-17 16:16:04 发布

阅读量435

点赞数 3

文章标签：前端 javascript html

本文链接：https://blog.youkuaiyun.com/zweizhao/article/details/142315710

版权

document.querySelector('#login-container').addEventListener('submit', e => {
      e.preventDefault()
      const email = target.email.value
      const password = target.password.value
    })

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

污斑兔

关注关注

3
点赞
踩
10

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

HTML 之防止 form 表单默认行为实践日志 2024/6/21

梦境虽美,却不长.

06-21

594

-type="button" 的作用是创建一个标准的按钮，它不会自动提交表单数据到服务器（与 type="submit" 相对）。当点击这个按钮时，会执行 onclick 属性中定义的 JS 函数 connected()-->-- 输入密码 -->-- 连接按钮 -->

layui form表单提交后实现自动刷新

10-16

现在让我们来总结一下在layui中实现表单提交而不刷新页面并正确获取数据的步骤： 1. 为表单提交按钮设置type类型，通常为"button"，并添加相应的事件监听函数。 2. 在事件监听函数中，使用event.preventDefault()...

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

基于HTML实现表单提交后不刷新页面

09-28

使用ajax实现表单提交无刷新页面在项目中经常会用到。前一段时间跟着师傅学到了另外几种无刷新提交表单的方法，主要是基于iframe框架实现的。现在小编整理特此分享脚本之家平台供大家参考

如何阻止 form 表单提交后刷新页面？

qq_40147756的博客

12-27

1180

如何阻止 form 表单提交后刷新页面？

form表单因某些操作会自动提交并刷新页面，需禁止form的自动提交

一片天空

12-15

4268

一、form表单因某些操作会自动提交并刷新页面测试网页时，发现网页每次都会自动提交，发出请求。经过查找和测试，发现是form表单会自动提交，从而导致页面自动刷新。二、form表单自动提交规则 form表单中只有一个type=text的input（可以有其他类型的表单），在input中按enter键，会自动提交 form表单中有多个type=text的input，且无type=submit的按钮元素，则在input中按enter键，不会自动提交 form表单中有type=su

html form表单提交后不刷新不跳转的实现方法------巧妙地用iframe

热门推荐

认知行动坚持

02-28

3万+

在默认情况下，提交form表单后，是有刷新的。但是，有的时候，希望提交表单后不要刷新，免得把页面已经有的东东给刷跑了，那怎么搞呢（最近刚好碰到）？实例代码如下：经测试，实现了功能。点击提交后，不跳转，不刷新，靠谱。

form表单点击提交按钮后不刷新页面

july_young的博客

09-28

1万+

<form id="user"> <button id="search" onclick="save()" >保存</button> </form> function save(){ $.post("写入需要跳转的url",$('#user').serialize(),function(da

js阻止默认浏览器行为与冒泡行为的实现代码

10-22

通过阻止默认行为，我们就能避免页面跳转，并按需执行JavaScript。实际代码示例中的`enter_down`函数是监听文本框的`keydown`事件，当用户按下回车键时，会阻止默认的表单提交行为，并调用`submitForm`函数来执行...

Ajax提交Form表单页面仍会刷新问题的快速解决办法

10-20

然而，如果我们希望使用Ajax来提交表单，就需要阻止这种默认行为。问题的核心在于，如果没有明确指定`<button>`的`type`属性，它会被浏览器默认为`type="submit"`，导致表单提交和页面刷新。例如，下面的代码会...

el-form回车默认刷新页面

最新发布

02-14

为了防止 `el-form` 中按下回车键后默认刷新页面，可以采用多种方法来处理这个问题。 #### 方法一：使用事件修饰符 `.prevent` 通过在 `<el-form>` 标签上添加 `@submit.native.prevent` 属性，能够有效阻止表单的...

Form表单提交且不刷新页面的简单实现

SSS_Benjamin的博客

09-29

5587

form表单在点击提交后会刷新整个页面，有时会影响网页功能和效果使之不刷新的解决思路：给form表单指定一个隐藏的iframe，这样提交表单后刷新的就是那个iframe而不是整个页面了 iframe： <iframe name="hidden" style="display:none;"></iframe> form： <form name="form" meth...

html form表单提交后不刷新不跳转的实现方法------

layman1024的博客

06-08

1万+

[html] view plain copy html> body> form action="" method="post" target="nm_iframe"> input type="text" id="id_input_text" name="nm_input_text" /> in

表单提交页面不刷新的方法

qq_37036963的博客

03-17

831

1、在表单提交之后加上 document.forms[0].target="rfFrame"; 2、然后在页面的某一处（可以放在最后）加上 <iframe id="rfFrame" name="rfFrame" src="about:blank" style="display:none;"></iframe> 3、这样的话页面就实现

form表单提交不刷新页面的方法

weixin_30535913的博客

04-16

1881

方法1：给form表单加onsubmit事件，值为return false; <form action="" method="post" onsubmit="return false"> 　<button type="submit" class="btn btn-primary">提交</button> </form> 方法2：在FORM表...

html实现form表单提交后不重新刷新页面

LrvingTc的博客

01-23

1万+

今天在实现ajax异步传输form表单数据时，测试时查看返回的错误信息，但是每次都会重新刷新页面。百度查了下解决办法，总结一下：在form表单后添加一个iframe标签，属性设为隐藏,form表单中target属性值设为iframe标签的名字。代码如下： <html> <body> <form action="user" method="post" target=...

html form表单提交后不刷新不跳转的实现方法

系咩的个人收藏博客

01-04

5992

html> body> form action="" method="post" target="nm_iframe"> input type="text" id="id_input_text" name="nm_input_text" /> input type="submit" id="id_submit"