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

Question

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

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);
});

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

编辑：

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

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

编辑 2

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

Answer 1

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

页面正在重新加载，因为您正在使用 <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();
        }
    });
});

Answer 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();

如果您希望在文本框中按回车键时发生这种情况，请像

一样使用它

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

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

Prevent Page Load on Jquery Form Submit with None Display Button

html

javascript

ajax

jquery

reload