防止Jquery表单上的页面加载提交无显示按钮

Question

防止Jquery表单上的页面加载提交无显示按钮

我有一个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，可能会在以后的其他浏览器中提交。

Answer 1

在这种情况下，当您不需要提交按钮时，只需使用表单的提交方法，就像首先为您的form标记提供一个id（例如myForm）<div&nbsp;id="bot"> &nbsp;&nbsp;<form&nbsp;id="myForm"> &nbsp;&nbsp;&nbsp;&nbsp;<input&nbsp;id="user-response"&nbsp;type="text"&nbsp;placeholder=""&nbsp;autocomplete="off"&nbsp;autofocus&nbsp;/> &nbsp;&nbsp;&nbsp;&nbsp;<button&nbsp;id="user-submit"&nbsp;type="submit"&nbsp;style="display:&nbsp;none&nbsp;!important;">Send</button> &nbsp;&nbsp;</form></div>然后提交表单使用document.getElementById("myForm").submit();如果您希望在按文本框中输入时发生这种情况，请使用它$('#user-response').on('keypress',&nbsp;function(event){ &nbsp;&nbsp;&nbsp;if&nbsp;(event.which&nbsp;===&nbsp;13&nbsp;||&nbsp;event.keyCode&nbsp;===&nbsp;13)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById("myForm").submit(); &nbsp;&nbsp;&nbsp;}});

Answer 2

我知道AJAX是我最终会尽快完成的，因为我的项目将会扩展，我将与PHP和数据库进行交互，但我对此问题的主要关注是根据显示值解决按钮功能的不规则性。我想知道是否有人克服了这个问题以及如何解决这个问题，因为我仍在使用我的项目进行AJAX预备。你的评论很有帮助，我肯定会去哪里，但如果有人在自己的工作中遇到这个问题，我想在这里有所帮助。