jquery - jQuery Enter key can't work for other forms

Question

I have a problem with my jQuery enter key. For form login the enter key is working goods but for form reset password, the enter key is not working but with click it can.

Not working means: if I press enter, it will redirect to action page without any validation in my JS.

Now I want to set the enter key for form reset password.

Here is my code so far:

JS

$(document).ready(function()               
    {
        $(document).bind('keypress', function(e)
        {
            if (e.keyCode == 13) {
                $('#button_sign_in').trigger('click');
            }
        });

        $('#button_sign_in').click(function()
        {
            if ( $("#username").val().length == 0 )
            {
                $('#button_sign_in').attr("disabled", false);
                $('#username').focus();
            }
            else if ( $("#password").val().length == 0 )
            {
                $('#button_sign_in').attr("disabled", false);
                $('#password').focus();
            }
            else if ( $("#username").val().length == 0 && $("#password").val().length == 0 )
            {
                $('#button_sign_in').attr("disabled", false);
                $('#username').focus();
            }
            else
            {
            $.ajax
            ({
                url: "login",
                type: "post",
                data: $('#login_form').serialize(),
                dataType:'json',
                success: function (data) 
                {
                    if (data.status=='SUCCESS') 
                    {
                        window.location='home.php'; 
                    }
                    else 
                    {
                        $('#button_sign_in').shake(4,6,700,'#CC2222');
                        $('#username').focus();
                        $('#password').val("");
                        $('#button_sign_in').attr("disabled", false);
                        $("#info").text("Wrong username or password.");
                    }
                },
                error: function (e) {
                    console.log('error:'+e);
                }
            });
            }
        });

$(document).bind('keypress', function(e)
        {
            if (e.keyCode == 13) {
                $('#button_reset').trigger('click');
            }
        });

        $('#button_reset').click(function()
        {
            if ( $("#email").val().length == 0 )
            {
                $('#button_reset').attr("disabled", false);
                $('#email').focus();
                $("#info2").text("Email is required.");
                $('#button_reset').shake(4,6,700,'#CC2222');
            }
            else
            {
            $.ajax
            ({
                url: "check_email",
                type: "post",
                data: $('#reset_form').serialize(),
                dataType:'json',
                success: function (data) 
                {
                    if (data.status=='FOUND') 
                    {
                        $("#info2").html('<span class="success">Password reset instructions has sent to your email.</span>');
                        $('#email').val("");
                        $('#email').focus();
                    }
                    else 
                    {
                        $('#button_reset').shake(4,6,700,'#CC2222');
                        $('#email').focus();
                        $('#button_reset').attr("disabled", false);
                        $("#info2").text("Email is invalid.");
                    }
                },
                error: function (e) {
                    console.log('error:'+e);
                }
            });
            }
        });
    });

And the HTML code for Login Form like this:

<form id="login_form">
                            <div id="info"></div>

                            <table>                                 
                                <td><input type="text" name="username" class="input" id="username" placeholder="Username or email"/></td>

                                <tr>

                                <td><input type="password" name="password" class="input" id="password" placeholder="Password"/></td>

                                <tr>

                                <td><input type="button" id="button_sign_in" class="button_sign_in" value="Sign in"/></td>

                                <tr>

                                <td>
                                    <span class="keep_logged_in"><input type="checkbox"> Keep me logged in</span>
                                </td>
                            </table>
                        </form>

and for Form Reset like this :

<form id="reset_form" class="collapse">
                            <div id="info2" class="info2"></div>
                            <table class="t_info">
                                <td><input type="text" name="email" class="input" id="email" placeholder="Email"/></td>

                                <tr>

                                <td><input type="button" id="button_reset" class="button_reset" value="Submit"/></td>
                            </table>
                        </form>

Is there something wrong with my code?

score 1 · Accepted Answer

您有两个单独的按键处理程序绑定到document，并且也没有任何东西来测试用户在按下 Enter 时输入的字段。

为什么不将这些绑定到您的每个表单：

    $("#login_form").bind('keypress', function(e) {
        if (e.which === 13) {
            e.preventDefault();
            $('#button_sign_in').trigger('click');
        }
    });

    $("#reset_form").bind('keypress', function(e) {
        if (e.which === 13) {
            e.preventDefault();
            $('#button_reset').trigger('click');
        }
    });

这样，当在表单中按下输入时，表单的按钮就是您触发点击的按钮。

score 1 · Accepted Answer

您可以尝试通过选择相关（最接近的）form元素然后触发提交来采用更通用的方法。此外，我还建议考虑将您的keypress事件应用于更具体的元素，例如：

$('input, select, textarea').bind('keypress', function(e)
{
    if (e.keyCode == 13) {
        $(this).closest('form').trigger('submit');
    }
});

score 0 · Accepted Answer

不确定这是否正是您想要的，但您似乎希望在单击和输入时都提交两种表单？

如果是这种情况，我认为您应该将 AJAX 调用绑定到 form.submit ，然后添加一个 e.preventDefault 以防止提交以默认行为行事（因为您想使用 AJAX 而不是默认提交行为）。

像这样的东西：

$('#login_form').submit(function(e){

    e.preventDefault()

    // now do your AJAX call for login_form here (the code of your $('#button_sign_in').click)

})

$('#reset_form').submit(function(e){

    e.preventDefault()

    // now do your AJAX call for reset_form here (the code of your $('#button_reset').click)

})

希望这可以帮助

编辑

您应该将type两个按钮的submit

jquery - jQuery Enter key can't work for other forms

3 回答 3

Related

Reference