防止页面加载到jQuery表单上，而无显示按钮

Question

我有一个设置为MSDOS终端样式的聊天机器人。 用户键入他们的响应，然后按Enter。 我发现当我用“ 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; 样式的按钮。 我也将其更改为输入，然后键入=“ button” / type =“ submit”，但再次显示：none; 导致在点击“ enter”时重新加载页面。 我已经在页面重载onclick查询ajax等页面上阅读了大约20个不同的问题……它们似乎都没有解决这个问题。

编辑：

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

也要提及的是，页面重新加载在Windows 7的Chrome 49.0.2623.87中不存在，但在所有OS X浏览器和某些Windows浏览器中均存在。

编辑2

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

Answer 1

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

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

Answer 2

在这种情况下，当您不需要提交按钮时，只需使用表单的Submit方法，就像首先为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();
   }
});