Question

我在MSDOS终端样式中设置了一个聊天机器人。用户输入他们的响应，然后点击进入。我发现当我用＆＃34; display：none;＆＃34;标记按钮时它导致页面在几个浏览器上重新加载（我的Windows Chrome浏览器没有重新加载。不知道为什么）。如何隐藏按钮，表单和代码是否正常运行？我宁愿不使用＆＃34; position：absolute;＆＃34;把它发送出去。

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;造型到按钮。我还将其更改为输入并输入=＆＃34;按钮＆＃34; / type =＆＃34;提交＆＃34;但再次显示：无;在点击“输入”时会导致页面重新加载。我在页面重新加载onclick查询ajax等上已经阅读了大约20个不同的问题......它们似乎都没有解决这个问题。

修改

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

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

编辑2

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

Answer 1

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

Answer 2

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

如果您希望在文本框中输入时发生这种情况，请使用

$('#user-response').on('keypress', function(event){
   if (event.which === 13 || event.keyCode === 13) {
      document.getElementById("myForm").submit();
   }
});

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

2 个答案: