我有一个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);
});

我尝试了各种类型的返回：false;,event.preventDefault();等等,但只要我不应用display：none;造型到按钮.我也把它改成输入并输入=“button”/ type =“submit”但是再次显示：none;在点击“输入”时会导致页面重新加载.我已经在页面重新加载onclick查询ajax等上阅读了大约20个不同的问题……它们似乎都没有解决这个问题.

编辑：

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

还要提一下,Windows 7的Chrome 49.0.2623.87上没有页面重新加载,但是在所有OS X浏览器和某些Windows浏览器上都有.

编辑2

错误：显示：无;按钮导致页面重新加载.在OS X浏览器和某些Windows上显而易见.解决方案：切换到完整的Ajax非表单,应解决任何问题.将工作时的Ajax解决方案放在一起.下面的正确答案是建议Ajax. Bug已提交给Chrome Dev,可能会在以后的其他浏览器中提交.

解决方法:

我想你在寻找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();
        }
    });
});