(注意:此问题旨在作为所有问题的重复目标和规范答案,在所有问题中都不会阻止表单提交操作,并导致重新加载页面和丢失输入数据)。

  1. 我有一个HTML表单,当我单击“提交”按钮时,页面闪烁,并且所有表单字段都被重置。

要么

  1. 我有一个基于AJAX的表单,当我单击“提交”按钮时,页面闪烁,所有表单字段都被重置,并且从未发生我的AJAX响应。

要么

  1. 我有一个没有<input type="submit" />按钮的HTML表单,但是有一个普通的<button>元素,当我单击它时,页面闪烁并且所有表单字段都被重置。

要么

  1. 我的表单包含一个文本字段,当我专注于该文本字段并按Enter键时,页面将闪烁,并且所有表单字段都将重置。

要么

  1. 我有图像类型的输入,当我单击它们时,页面将刷新并清除表单。

#1楼 票数:1 已采纳

问题?

您并没有停止提交表单,浏览器正在重新加载页面,清除了输入的所有数据。

情况1

基本的HTML表单包含一个方法属性(通常为postget )和一个动作属性(通常为处理表单的脚本的文件名)。 如果省略或留空,例如<form action="" method="get"><form method="post"> ,则表单会将内容发送回其所在的同一页面。 像通常称为回发一样,这种行为可能是理想的,但是,这要求页面在每次加载时都要进行处理。 如果您不希望在表单存在的同一页面上对其进行处理,请确保在action属性中指定处理页面,或者使用以下方法之一阻止表单提交。

情况二

您正在创建使用表格的页面内应用程序,例如计算器,并且不需要提交表格,但是每当您单击某个按钮时,页面就会闪烁,并且您不会得到预期的结果。

99%的时间是因为正在提交表单,而您需要做的是阻止Submit事件。 此问题的最常见解决方案是从处理函数return falsereturn false )或阻止event.preventDefault事件的默认行为( event.preventDefault )。

情况3

您有一个没有提交按钮的表单,例如,表单中的<input type="submit" /><button>Click here</button> ,但是单击按钮或输入类型为image时,该表单正在提交。 罪魁祸首是<button>元素和类型设置为image的输入。 button元素的默认类型是submit ,并且无需指定其他类型(例如<button type="button"> ,单击button元素将立即提交您的表单。 对于类型设置为图像的输入也是如此。 单击该类型的输入将提交一个表单。

案例4

单击表单中的元素(例如链接,按钮)可能会触发绑定到表单的其他单击事件,这些事件更多地位于DOM层次结构中。 如果您的表单在侦听事件的级别高于单击的元素,则单击事件将使DOM冒泡,并触发其他所有单击事件。 可以通过使用事件的stopPropagation()方法来避免这种情况。

案例5

某些浏览器的行为很老旧 ,其中在聚焦时按Enter键会提交带有单个文本字段的表单。 这是基于一个非常古老的规范 ,其中指出:

当表单中只有一个单行文本输入字段时,用户代理应接受该字段中的Enter作为提交表单的请求。

  ask by j08691 translate from so

未解决问题?本站智能推荐:

1回复

一秒钟后使用JS在同一页面上呈现表单数据后数据消失

我试图使用JavaScript在同一页面上呈现表单数据。 的JavaScript 当将提交按钮放置在form元素之外时,它可以工作。 HTML-工作正常 当它仅短暂地呈现id为“ display”的div时,如果将提交字段放在form元素内,则消失。 HTML-无效时 我
1回复

收集从任何页面发布的表单数据

假设我创建了一个静态.html页面。 接下来,我用一堆输入框构建一个表单。 然后,我决定将所有表单数据发布到另一个页面,称为process-form-data.aspx。 我的问题是,由于我将表单数据发布到了.aspx页,因此如何在屏幕后面的代码中使用C#来获取所有数据? 我首先尝试了
3回复

PHP页面如何检索表单数据?

我是PHP新手,正在W3Schools上PHP课程。 在本课程的表单处理部分中,我读到有两种处理表单数据的方法: POST和GET 。 我知道,根据所使用的方法,会创建一个超全局变量,该变量将数据存储为键值对。 在目标页面上,从此变量中检索数据(使用$_POST["key"]或$_GET[
1回复

在2个不同页面中发送的表单数据

我有一个表单,当我点击一个按钮时,数据会通过电子邮件发送。 我的问题是我希望将相同的数据插入到表中。 我在这里找到了一个解决方案: 将表单值发送到多个页面但我不知道如何在我的代码中插入那部分代码。 这是我放在页面中的代码: 事实是,我不知道我是否正确插入了它,也不知道如何调用按钮上的函数。
3回复

在页面刷新时保留表单数据

我有一种情况,由于某种原因,当用户填写表单时,网页可能会刷新。 不需要的效果是消除用户已输入的数据。 是否有解决方案让表单数据在页面刷新时保持不变? 表单包括文本输入和选择。
1回复

为什么重新加载页面不会刷新表单?

如果您在输入中输入任何内容并刷新页面-输入将保留旧内容。 F5-重新加载按钮-清除缓存并重新加载-没有任何帮助。 仅当我更改url之后,表单才会刷新,然后返回到表单的页面url。 也许可以通过编码解决,但不能相信我必须为这种普通的事情编写代码。 重新加载页面应该意味着重新加载整个页
2回复

表单重新加载页面而不发送提交数据

这是我的代码。 在我的.js文件中: 在我的index.php文件中: 单击sunmit按钮时,这不会发送任何内容。 实际上,您可以单击按钮直到当天结束时没有任何反应(甚至调试器中的消息都没有) 如果我删除了return false; 从按钮上的onClick ,我点击按钮,
1回复

重新加载页面重新提交表单(PHP)

因此,当我填写表单并提交表单时,如果我重新加载页面,它会重新提交表单。 这是我的代码: 页面顶部: 我也尝试在代码末尾取消设置值,但这似乎也不起作用。 我也尝试过array_key_set(或者不管它叫什么)而不是isset,但这似乎也没有用。 这是我在HTML中的表单,它与我的