阻止Jquery表单上的页面加载无提示按钮 [英] Prevent Page Load on Jquery Form Submit with None Display Button

问题描述

我有一个以MSDOS终端样式设置的聊天机器人。用户键入他们的回复，然后点击回车。我发现当我用display：none;标记按钮时它导致页面重新加载在几个浏览器（我的Windows Chrome浏览器不重新加载，不知道为什么）。我怎样才能隐藏按钮，但窗体和代码运行正常？我宁愿不使用位置：绝对;

HTML：

 < div ID = 机器人 ><形式> 
< input id =user-responsetype =textplaceholder =autocomplete =offautofocus /> 
< button id =user-submittype =submit>发送< / button> 
< / form>< / div> 
  

JAVASCRIPT：

 < $（'＃bot'）。on（'click'，'＃user-submit'，function（e）{
 e.preventDefault（）; 
 message = $（' （）; 
 sendUserResponse（）; 
 getBotResponse（message）; 
}）; 
 $ message_toLowerCase（）; 
 sendUserResponse 
  

我尝试过各种类型的return：false; event.preventDefault（）;一切正常，只要我不适用display：none;造型到按钮。我也改变它输入和键入=按钮/类型=提交，但再次显示：无;点击输入时会导致页面重新加载。我已经阅读了关于页面重新加载onclick查询阿贾克斯等20个不同的问题...他们似乎都没有解决这个问题。

编辑：

使用以下两个建议检查按键Enter以提交表单，但它们仍然保持相同的失败模式。如果您的提交按钮是样式的，表单将重新加载页面display：none;当按钮显示时，下面的方法工作。将检查可能导致提交和重新加载的返回值的代码。
当前：
带有可见按钮的页面 - 可以正常使用任何方法。
使用Display：none按钮的页面 - 可以在所有给定的方法下重新加载。

还想提一下，Chrome 49.0.2623.87上不存在页面重新加载适用于Windows 7，但适用于所有OS X浏览器和一些Windows浏览器。

编辑2

Bug：display：none;按钮会导致页面重新加载。在OS X浏览器和某些Windows上很明显。解决方案：切换到完整的Ajax非形式，并应解决任何问题。将工作的Ajax解决方案放在一起时会发布。下面的正确答案是建议Ajax。错误已提交给Chrome Dev，可能会在稍后的其他浏览器中解析。

解决方案

我认为您正在寻找AJAX。 AJAX允许您在不重新加载页面的情况下将表单数据发送到后端PHP文件（然后可以将数据插入到数据库中，和/或从数据库中获取数据）。

因为您正在使用< form> ，所以页面正在重新加载。当提交按钮被按下时，它提交表单，它总是刷新页面。然而，如果你使用AJAX，你可以发送数据，（可选地接收一个响应）并继续进行。

事实上，当你使用AJAX时， t甚至需要使用< 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（）; 
} 
}）; 
}）; 
  

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屋！