使用无显示按钮防止在 Jquery 表单提交上加载页面

Posted 2023-02-22

【中文标题】使用无显示按钮防止在 Jquery 表单提交上加载页面

【英文标题】：Prevent Page Load on Jquery Form Submit with None Display Button

【发布时间】：2016-07-01 17:16:22

【问题描述】：

我有一个 MSDOS 终端风格的聊天机器人。用户键入他们的响应，然后按回车键。我发现当我用“display：none;”标记按钮时它会导致页面在多个浏览器上重新加载（我的 windows chrome 浏览器没有重新加载。不知道为什么）。如何隐藏按钮但表单和代码正常运行？我宁愿不使用“位置：绝对；”将其发送到屏幕外。

html：

<div id="bot"><form>
<input id="user-response" type="text" placeholder="" autocomplete="off" autofocus />
<button id="user-submit" type="submit">Send</button>
</form></div>

javascript：

$('#bot').on('click', '#user-submit', function(e) 
e.preventDefault();
message = $('#user-response').val();
message = message.toLowerCase();
sendUserResponse();
getBotResponse(message);
);

我尝试过各种类型的返回：false;、event.preventDefault(); 等等，但只要我不应用 display: none; 一切正常。按钮的样式。我也将其更改为 input 和 type="button"/type="submit" 但再次显示：无；导致页面在点击“输入”时重新加载。我已经阅读了关于页面重新加载 onclick 查询 ajax 等的大约 20 个不同的问题......似乎没有一个能够解决这个问题。

编辑：

使用下面的两个建议来检查按键“Enter”以提交表单，但它们继续相同的失败模式。如果您的提交按钮样式为 display: none; 则表单会重新加载页面当按钮可见时，以下方法有效。将检查可能导致提交和重新加载的返回值的代码。 现在： 带有可见按钮的页面 - 适用于任何方法。 带有显示的页面：无按钮 - 导致在所有给定方法下重新加载。

还想提一下，Windows 7 的 Chrome 49.0.2623.87 上不存在页面重新加载，但在所有 OS X 浏览器和某些 Windows 浏览器上都存在。

编辑 2

错误：显示：无；按钮导致页面重新加载。在 OS X 浏览器和某些 Windows 上明显。解决方案：切换到完整的 Ajax 非表单，应该可以解决任何问题。放在一起时将发布有效的 Ajax 解决方案。下面的正确答案是建议 Ajax。提交给 Chrome Dev 的 bug，以后可能会提交给其他浏览器的 debs。

【问题讨论】：

你要使用回车吗？

隐藏时是否提交？

是的，我希望它在隐藏时提交，只需使用 enter 即可。考虑使用终端或命令提示符。没有提交按钮，只需按 Enter。我正在设计与此类似的东西，但它只是一个 javascript 页面。我让它与 position: absolute;顶部：-9999 像素；但我不想保留它，因为以后可能会出现样式问题。

【参考方案1】：

我认为您正在寻找 AJAX。 AJAX 允许您将表单数据发送到后端 php 文件（然后可以将数据插入数据库，和/或从数据库中获取数据），而无需重新加载页面。

页面正在重新加载，因为您使用的是<form>。当按下提交按钮时，它会提交表单，该表单总是刷新页面。但是，如果您使用 AJAX，您可以发送数据（可选地接收响应）并照常进行。

事实上，当您使用 AJAX 时，您甚至不需要使用 <form> 结构——简单的 DIV 就可以工作。那么你就不需要使用event.preventDefault()来抑制内置的表单刷新了。

Check out this post 尤其是它的例子。将它们复制到您自己的系统上，看看它们是如何工作的。这很简单。

---

另外，将提交按钮的类型从 type="submit" 更改为 type="button"

---

要检测用户何时在输入字段中按下 ENTER，然后单击提交按钮，请尝试以下操作：

$(function()
    $('#user-response').keyup(function()
        var keycode = (e.keyCode ? e.keyCode : e.which);
        if(keycode == '27') $('form').fadeOut();
        if(keycode == '13') 
            $('#user_submit').click();
        
    );
);

【讨论】：

我知道 AJAX 是我将很快结束的地方，因为我的项目将扩展并且我将与 PHP 和数据库进行交互，但我对这个问题的主要关注是解决按钮功能的不规则性，具体取决于在显示值上。我想知道是否有人已经克服了这个问题以及如何解决它，因为我的项目仍然是 AJAX 之前的。您的评论很有帮助，而且肯定是我要去的地方，但是如果有人在自己的工作中遇到这个问题，我想在这里提供一些有用的东西。

我会做的。我只想看到上述问题得到解决。如果这是一个尚未解决的问题，那么浏览器开发人员或 W3C 可能会考虑它。但是我很快就会做 AJAX。谢谢！

谢谢！当我明天再次开始该项目时，我会尝试你的建议，然后会回复。

使用它会导致表单重新加载页面。不知道为什么当我尝试返回 false 并防止默认值时，但仍然没有成功。当按钮不显示时，似乎是其他东西返回。这一直有效，直到我使用 display: none;

设置提交按钮的样式

我的解决方案是将按钮绝对定位到-9999px，这样它就在屏幕外并且工作正常。我想知道为什么会出现这种奇怪的行为，因为按钮是 display: none;我今天将切换到 ajax，但我希望找到导致 javascript 函数失败并重新加载页面的未显示按钮的原因。

【参考方案2】：

在这种情况下，当您不需要提交按钮时，只需使用表单的提交方法，例如首先为您的form 标签提供一个 id（例如 myForm）

<div id="bot">
  <form id="myForm">
    <input id="user-response" type="text" placeholder="" autocomplete="off" autofocus />
    <button id="user-submit" type="submit" style="display: none !important;">Send</button>
  </form>
</div>

然后提交表单使用

document.getElementById("myForm").submit();

如果您希望在文本框中按 Enter 时发生这种情况，请像这样使用它

$('#user-response').on('keypress', function(event)
   if (event.which === 13 || event.keyCode === 13) 
      document.getElementById("myForm").submit();
   
);

【讨论】：

当按钮设置为 display: none 时仍然会重新加载页面；但是当你有明显的按钮样式时，这会起作用。