Javascript：在Enter Key按下提交阻止表单

I have a web page where i have 2 forms when i click the enter key, I am calling a javascript function to force the page to load another page.My code is

我有一个网页,当我点击回车键时,我有2个表格,我正在调用一个javascript函数来强制页面加载另一个页面。我的代码是

function SearchUser()
{
var text = document.getElementById("searchItem").value;
text = text == "" ? -1 : text;
var by = document.getElementById("listBy").value;   
var on="";
if(by==1)
{
    on="USERNAME";
}
else if(by==2)
{
    on="FIRSTNAME";
}
else if(by==3)
{
    on="EMAIL_ID";
}

gotoUrl="userlist.php?searchItem="+text+"&onSearch="+on; 
    alert(gotoUrl); 
window.navigate=gotoUrl;

}

and

$(document).ready(function()
{
 $("#frmUserListSearch").keyup(function(event)
 {
  if(event.keyCode == 13)
  { 
    SearchUser();
  }
 });

});

But the page is doing a form submit when the SearchUSer function being called.I am getting the correct url in the alert.But The page is not loading in the brower

但是当调用SearchUSer函数时页面正在进行表单提交。我在alert中获取了正确的url.But页面没有加载到浏览器中

Any Ideas ???

有任何想法吗 ???

Thanks in advance

提前致谢

4 个解决方案

#1

if (document.addEventListener) {
    document.getElementById('strip').addEventListener('keypress',HandleKeyPress,false);
} else {
    document.getElementById('strip').onkeypress = HandleKeyPress;
}

function HandleKeyPress(e) {
    switch (e.keyCode) {
        case e.DOM_VK_ENTER:
        if (e.preventDefault)
            e.preventDefault();
    else e.returnValue = false;
    }
}

EDIT due to original Question edit:

由于原始问题编辑编辑:

all you need is:

所有你需要的是:

$(document).ready(function()
{
    $("#frmUserListSearch").keyup(function(event)
        {
            if(event.keyCode == 13)
            {     
                SearchUser();
                if (e.preventDefault)
                    e.preventDefault();
                else e.returnValue = false;
            }
        });
});

edited to reflect comment

编辑以反映评论

#2

Returning false often does the trick.

返回虚假通常会成功。

http://javascript.about.com/library/bldisdef.htm

#3

I have two recommendations. First, use the keydown event instead of keyup (it catches "enter" before submit better). Second, in your SearchUser() function, use window.location instead of window.navigate to go to the other page.

我有两个建议。首先,使用keydown事件而不是keyup(它在提交之前捕获“enter”)。其次,在您的SearchUser()函数中,使用window.location而不是window.navigate转到另一页。

$(document).ready(function() {
  $("#frmUserListSearch").keydown(function(event) {
     if(event.keyCode == 13){    
       SearchUser();
       return false;
     }
  });
});

NOTE: Don't forget to remove the "alert()" inside the SearchUser() function as it causes the form to submit before navigating away from the page.

注意:不要忘记删除SearchUser()函数中的“alert()”,因为它导致表单在导航离开页面之前提交。

#4

You can do this by using the action attribute of the form, without having to deal with key events, granted that you will later need javascript to take action on the control that submits the form.

您可以通过使用表单的action属性来执行此操作,而无需处理关键事件,因为您以后需要使用javascript对提交表单的控件执行操作。

  <html>
     <head>
        <script type="text/javascript">
           function donothing() {}
        </script>
     <body>
        <form action='javascript:donothing()'>
           ...
        </form>
     </body>
  </html>

#1

if (document.addEventListener) {
    document.getElementById('strip').addEventListener('keypress',HandleKeyPress,false);
} else {
    document.getElementById('strip').onkeypress = HandleKeyPress;
}

function HandleKeyPress(e) {
    switch (e.keyCode) {
        case e.DOM_VK_ENTER:
        if (e.preventDefault)
            e.preventDefault();
    else e.returnValue = false;
    }
}