使用无显示按钮防止在 Jquery 表单上加载页面 [英] Prevent Page Load on Jquery Form Submit with None Display Button

问题描述

我有一个 MSDOS 终端风格的聊天机器人.用户输入他们的回复，然后按回车键.我发现当我用display: none;"标记按钮时它会导致页面在多个浏览器上重新加载(我的 Windows chrome 浏览器没有重新加载.不知道为什么).如何隐藏按钮但表单和代码正常运行?我宁愿不使用位置:绝对；"将其发送到屏幕外.

HTML:

<input id="user-response" type="text" placeholder="" autocomplete="off" autofocus/><button id="user-submit" type="submit">发送</button></form></div>

JAVASCRIPT:

$('#bot').on('click', '#user-submit', function(e) {e.preventDefault();message = $('#user-response').val();message = message.toLowerCase();发送用户响应()；getBotResponse(消息)；});

我尝试了各种类型的返回:false;、event.preventDefault();等等，但只要我不应用 display: none; 一切正常.按钮的样式.我也将其更改为 input 和 type="button"/type="submit" 但再次显示:none;导致页面在点击输入"时重新加载.我已经阅读了关于页面重新加载 onclick 查询 ajax 等的大约 20 个不同的问题……它们似乎都没有解决这个问题.

使用下面的两个建议来检查是否按Enter"键提交表单，但它们继续出现相同的失败模式.如果您的提交按钮样式显示:无；当按钮可见时，以下方法起作用.将检查可能导致提交和重新加载的返回值的代码.目前:带有可见按钮的页面 - 适用于任何方法.带显示的页面:无按钮 - 导致在所有给定方法下重新加载.

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

编辑 2

错误:显示:无；按钮导致页面重新加载.在 OS X 浏览器和某些 Windows 上很明显.解决方案:切换到完整的 Ajax 非表单，应该可以解决任何问题.放在一起时将发布有效的 Ajax 解决方案.下面的正确答案是建议使用 Ajax.提交给 Chrome Dev 的错误，稍后可能会提交给其他浏览器 deb.

解决方案

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

页面正在重新加载，因为您正在使用 .当提交按钮被按下时，它提交表单，它总是刷新页面.但是，如果您使用 AJAX，您可以发送数据(可选地接收响应)并照常进行.

事实上，当您使用 AJAX 时，您甚至不需要使用 结构——简单的 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();}});});

I have a chatbot of sorts set in MSDOS terminal style. The user types their response then hits enter. I have found that when I tag the button with "display: none;" it causes the page to reload on several browsers (my windows chrome browser doesn't reload. not sure why). How can I have the button hidden yet the form and code functioning properly? I would rather not use "position: absolute;" to send it off screen.

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);
});

I have tried various types of return: false;, event.preventDefault();, and such but everything works fine as long as I don't apply display: none; styling to the button. I've also changed it to input and type="button"/type="submit" but again display: none; causes the page to reload when hitting 'enter'. I have read about 20 different questions on page reload onclick query ajax etc... none of them seem to address this issue.

EDIT:

Used two of the suggestions below to check for key press "Enter" to submit the form but they continue the same pattern of failure. Form reloads the page if your submit button is styled display: none; The methods below work when the button is displayed visibly. Will check code for return values that may be causing submit and reload. Currently: Page with Visible button - works fine with any method. Page with Display: none button - causes reload under all given methods.

Would also like to mention that the page reload is not present on Chrome 49.0.2623.87 for Windows 7 but present on all OS X browsers and some Windows browsers.

EDIT 2

Bug: display: none; buttons cause page reload. Apparent on OS X browsers and some Windows. Solution: switch to full Ajax non-forms and should solve any problems. Will post working Ajax solution when put together. Correct answer below is for suggesting Ajax. Bug submitted to Chrome Dev and may be to other browsers debs later.

解决方案

I think you're looking for AJAX. AJAX lets you send the form data to a back end PHP file (that can then insert data into a DB, and/or get data from the DB) without reloading the page.

The page is reloading because you are using a <form>. When the submit button is pressed, it submits the form, which always refreshes the page. However, if you use AJAX you can send the data, (optionally receive a response) and carry on as normal.

In fact, when you are using AJAX you don't even need to use a <form> structure -- simple DIVs work just fine. Then you don't need to use event.preventDefault() to suppress the built-in form refresh.

Check out this post and especially its examples. Copy them onto your own system and see how they work. It's pretty simple.

---

Also, change the Submit button's type from type="submit" to type="button"

---

To detect when a user presses ENTER in the input field, and then click the submit button, try this:

$(function(){
    $('#user-response').keyup(function(){
        var keycode = (e.keyCode ? e.keyCode : e.which);
        if(keycode == '27'){ $('form').fadeOut();}
        if(keycode == '13'){ 
            $('#user_submit').click();
        }
    });
});

这篇关于使用无显示按钮防止在 Jquery 表单上加载页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！