小编典典

防止页面加载到Jquery表单上时使用无显示按钮提交

javascript

我有一个设置为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开发人员,以后可能还会提交给其他浏览器。


阅读 402

收藏
2020-05-01

共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();
        }
    });
});
2020-05-01