为了账号安全,请及时绑定邮箱和手机立即绑定

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

/ 猿问

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

蓝山帝景 2019-08-23 10:37:46

防止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,可能会在以后的其他浏览器中提交。


查看完整描述

3 回答

?
ibeautiful

我想你在寻找AJAX。AJAX允许您将表单数据发送到后端PHP文件(然后可以将数据插入到数据库中,和/或从数据库中获取数据),而无需重新加载页面。

页面正在重新加载,因为您正在使用<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();
        }
    });});


查看完整回答
反对 回复 2019-08-23
?
互换的青春

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


查看完整回答
反对 回复 2019-08-23
?
万千封印

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

查看完整回答
反对 回复 2019-08-23

添加回答

回复

举报

0/150
提交
取消
意见反馈 邀请有奖 帮助中心 APP下载
官方微信