防止在 Jquery 表单提交时加载页面，但“无”显示按钮

Prevent Page Load on Jquery Form Submit with None Display Button

本文关键字：按钮 显示 Jquery 表单提交 加载      更新时间：2023-09-26

我有一个以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（）;等等，但只要我不应用显示：none;按钮样式，一切正常。我还将其更改为输入和类型="按钮"/类型="提交"，但再次显示：无;导致页面在按"输入"时重新加载。我已经阅读了大约 20 个关于页面重新加载点击查询 ajax 等的不同问题......他们似乎都没有解决这个问题。

编辑：

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

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

编辑 2

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

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

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

事实上，当你使用AJAX时，你甚至不需要使用<form>结构 - 简单的DIV工作得很好。然后，您无需使用 event.preventDefault() 来禁止显示内置窗体刷新。

查看这篇文章，尤其是它的示例。将它们复制到您自己的系统上，看看它们是如何工作的。这很简单。

此外，将"提交"按钮的类型从"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();
        }
    });
});

在这种情况下，当您不需要提交按钮时，只需使用表单的提交方法，例如首先提供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();
   }
});
相关文章：