防止页面加载JQuery表单提交与无显示button
我有一个在MSDOSterminal风格设置的聊天机器人。 用户键入他们的回应，然后点击input。 我发现当我用“display：none”标记button的时候 它导致页面重新加载在几个浏览器（我的Windows Chrome浏览器不重新加载，不知道为什么）。 我怎样才能隐藏的button，窗体和代码正常工作？ 我宁愿不使用“立场：绝对的” 发送到屏幕上。
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); });
我已经尝试了各种types的返回：false; event.preventDefault（）;等等，但一切正常，只要我不适用display：none; 造型到button。 我也改变了input和键入=“button”/types=“提交”，但再次显示：无; 导致页面在点击“input”时重新加载。 我已经阅读了关于页面重新加载onclick查询ajax等20个不同的问题…他们似乎没有解决这个问题。
编辑：
使用下面的两个build议检查按键“Enter”提交表单，但他们继续相同的失败模式。 如果您的提交button是样式的，则表单将重新加载页面显示：无; 下面的方法工作时，button显示。 将检查可能导致提交和重新加载的返回值的代码。 目前：页面可见button – 任何方法工作正常。 页面显示：无button – 导致所有给定的方法重新加载。
还要提到的是，对于Windows 7而言，页面重新加载不在Chrome 49.0.2623.87上，但在所有OS X浏览器和一些Windows浏览器上都存在。
编辑2
错误：显示：无; button导致页面重新加载。 显然在OS X浏览器和一些Windows上。 解决scheme：切换到完整的Ajax非forms，并应解决任何问题。 放在一起时会发布工作的Ajax解决scheme。 下面的正确答案是build议Ajax。 Bug已提交给Chrome Dev，可能会在稍后的其他浏览器中显示。
我想你正在寻找AJAX。 通过AJAX，您可以将表单数据发送到后端PHP文件（然后可以将数据插入数据库，和/或从数据库获取数据），而无需重新加载页面。
该页面正在重新加载，因为您正在使用<form> 。 当提交button被按下时，它提交表单，它总是刷新页面。 但是，如果您使用AJAX，则可以发送数据（可选地接收响应）并正常进行。
事实上，当你使用AJAX时，甚至不需要使用<form>结构 – 简单的DIV工作得很好。 那么你不需要使用event.preventDefault()来禁止内置的表格刷新。
看看这个post ，尤其是它的例子。 把它们复制到你自己的系统上，看看它们是如何工作的 这很简单。
另外，将提交button的types从type="submit"更改为type="button"
要检测用户何时在input字段中按ENTER，然后单击提交button，请尝试以下操作：
$(function(){ $('#user-response').keyup(function(){ var keycode = (e.keyCode ? e.keyCode : e.which); if(keycode == '27'){ $('form').fadeOut();} if(keycode == '13'){ $('#user_submit').click(); } }); });
在这种情况下，当你不需要提交button时，只需使用表单的提交方法，就像首先提供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();
如果你想在按下input文本框时发生这种情况，那么就使用它
$('#user-response').on('keypress', function(event){ if (event.which === 13 || event.keyCode === 13) { document.getElementById("myForm").submit(); } });
