与按下回车相比，按下按钮时提交行为的行为不同 [英] Submit behavior is acting differently when pressing a button compared to pressing enter

问题描述

我有这个简单的登录屏幕，其中有一个名称的文本框和一个提交按钮。正在运行的jquery脚本是这样的：

$ $ $ $ $ $ $（document）.ready（function（）{

$（'＃btnLogin'）。click（function（）{validate（）}）;
$（'＃loginForm'）。submit（function（）{validate（）}）;

}）;
$ b函数validate（）{
if（$（'＃txtLogin'）。val（）！=''）{
document.cookie ='loginID ='+ $ （ '#txtLogin'）VAL（）;
$（'＃lblError'）。hide（）;
document.location.href ='mainmenu.aspx';
}
else {
$（'＃txtLogin'）。text（''）;
$（'＃lblError'）。show（）;
}
}

当我点击按钮时，按回车，它不会导航到mainmenu.aspx。我使用Chrome来跟踪它，它确实执行重定向，就像按下按钮时一样，但它只停留在同一页面上。我还在mainmenu.aspx的Page_Load函数（C＃）中插入了一个断点，但它永远不会到达它。

:这里是html

 < form id =loginFormrunat =server> 
< div> 
 
< div class ='theme login'> 
< p>登入< / p> 
< input type ='text'id ='txtLogin'maxlength = '17'/> 
< div>< input type ='button'id ='btnLogin'class ='button'value ='Log In'/>< / div> 
< div>< span id ='lblError'visible ='false'text ='*您必须输入有效的使用者名称>< / span>< / div> 
< / div> 
 
< / div> 
< / form> 
  

解决方案

在您的表单提交处理程序中，使用 preventDefault（）停止默认提交行为：

  $（'＃loginForm'） .submit（函数（e）{
 e.preventDefault（）; //吞下定期提交行为
 validate（）; //你的东西
 //真实提交你的选项
}）; 
  

参考： http://api.jquery.com/event.preventDefault/

I've got this simple login screen where is has a text box for the name, and a submit button. The jquery script running is this:

$(document).ready(function() {

    $('#btnLogin').click( function() { validate() });
    $('#loginForm').submit( function() { validate() });

});

function validate() {
    if ($('#txtLogin').val() != '') {
        document.cookie = 'loginID=' + $('#txtLogin').val();
        $('#lblError').hide();
        document.location.href = 'mainmenu.aspx';
    }
    else {
        $('#txtLogin').text('');
        $('#lblError').show();
    }
}

It works when I click the button, but when I press enter, it doesn't navigate to the mainmenu.aspx. I'm following it with Chrome and it does execute the redirect just like when you press the button, but it just stays on the same page. I also put a break point in the Page_Load function (C#) of the mainmenu.aspx, but it never reaches it.

EDIT:: Here's the html

<form id="loginForm" runat="server">
    <div>

        <div class='theme login'>
            <p>Login</p>
            <input type='text' id='txtLogin' maxlength='17' />
            <div><input type='button' id='btnLogin' class='button' value='Log In' /></div>
            <div><span id='lblError' visible='false' text='*You must enter a valid username'></span></div>
        </div>

    </div>
</form>

解决方案

In your form submit handler, use preventDefault() to stop the default submit behavior:

$('#loginForm').submit( function(e) { 
    e.preventDefault(); // swallow regular submit behavior
    validate(); // your stuff
    // real submit? your option
});

Reference: http://api.jquery.com/event.preventDefault/

这篇关于与按下回车相比，按下按钮时提交行为的行为不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！