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

时间:2009-05-26 14:42:41

标签: javascript forms submit

我有一个网页,当我点击回车键时,我有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;

}

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

});

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

任何想法???

提前致谢

4 个答案:

答案 0 :(得分:4)

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

由于原始问题编辑而编辑:

你需要的只是:

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

编辑以反映评论

答案 1 :(得分:2)

返回虚假通常可以解决问题。

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

答案 2 :(得分:2)

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

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

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

答案 3 :(得分:0)

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

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