防止页面加载到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”键来提交表单，但是它们继续出现相同的失败模式。如果您的提交按钮为样式显示，则窗体将重新加载页面。可见显示按钮时，以下方法有效。将检查代码以查找可能导致提交和重新加载的返回值。当前：具有可见按钮的页面-适用于任何方法。显示页面：无按钮-导致在所有给定方法下重新加载。

也要提及的是，页面重新加载在Windows7的Chrome49.0.2623.87中不存在，但在所有OSX浏览器和某些Windows浏览器中均存在。

编辑2

错误：显示：无；按钮会导致页面重新加载。在OSX浏览器和某些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();
        }
    });
});