0

我有一个登录表单，其中有一个单击调用 ajax 请求的按钮，只有当我鼠标单击按钮而不是按 Enter 键时才会触发请求，

<form id="signin_form">
    Email: <input type="text" id="email" name="email">
    Password: <input type="password" id="password" name="password">
    <input type="button" id="btn_signin" value="Sign In">
</form>

我从这里找到了一个工作示例（感谢 Stackoverflow），如何在按键上制作它，下面几乎是相同的反应，下面的脚本可以合并在一起以使脚本干净吗？

$("#password").keypress(function(event) {
    if (event.which == 13) {
        event.preventDefault();

        var parameters = $('#signin_form').serialize();

        $.ajax({
            url: baseurl + 'loginRequest',
            type: 'POST',
            data: parameters,
            dataType: 'json',
            success: function(output_str){
                if(output_str == "success"){

                    window.location.replace(window.location);
                }else{
                    $('#result').html(output_str);
                }
            }
        });
    }
});

// login request
$('#btn_signin').click(function(){
    var parameters = $('#signin_form').serialize();

    $.ajax({
        url: baseurl + '/login',
        type: 'POST',
        data: parameters,
        dataType: 'json',
        success: function(output_str){
            if(output_str == "success"){

                window.location.replace(window.location);
            }else{
                $('#result').html(output_str);
            }
        }
    });
});

谢谢。

4

5 回答 5

0

我想这就是你要的

$("#password").keypress(function (event) {
            if (event.which == 13) {
                event.preventDefault();
                performLogin();
            }
        });

    // login request
    $('#btn_signin').click(function () {
        var parameters = $('#signin_form').serialize();
        performLogin();
    });

    function performLogin() {
        var parameters = $('#signin_form').serialize();
        $.ajax({
            url: baseurl + '/login',
            type: 'POST',
            data: parameters,
            dataType: 'json',
            success: function (output_str) {
                if (output_str == "success") {

                    window.location.replace(window.location);
                } else {
                    $('#result').html(output_str);
                }
            }
        });
    }
于 2013-01-25T09:33:02.390 回答
0

将两个事件绑定到同一个函数，并检查点击或输入键，如下所示：

$("#password").on('keypress click', function(event) {
    if (event.type == 'click' || event.which == 13) {
        event.preventDefault();
        var parameters = $('#signin_form').serialize();

        $.ajax({
            url: baseurl + 'loginRequest',
            type: 'POST',
            data: parameters,
            dataType: 'json',
            success: function(output_str){
                if(output_str == "success"){
                    window.location.replace(window.location);
                }else{
                    $('#result').html(output_str);
                }
            }
        });
    }
});
于 2013-01-25T09:35:31.057 回答
0 
$("#password").keypress(function(event) {
    if (event.which == 13) {
        event.preventDefault();
        $('#btn_signin').click();
    }
});

// login request
$('#btn_signin').click(function(){
    var parameters = $('#signin_form').serialize();

    $.ajax({
        url: baseurl + '/login',
        type: 'POST',
        data: parameters,
        dataType: 'json',
        success: function(output_str){
            if(output_str == "success"){

                window.location.replace(window.location);
            }else{
                $('#result').html(output_str);
            }
        }
    });
});
于 2013-01-25T09:35:35.270 回答
0

查看以下JSFiddle。

从本质上讲，它归结为使用提交处理程序，当您单击提交按钮以及在任何表单字段中按 Enter时，该处理程序就会触发。就像您对表格的期望一样。

不能更清洁和更好地沟通你在做什么。

$("form").submit(function () {        
    // Your ajax code here...

    return false;
});

为了使它起作用，将您的输入类型从“按钮”更改为“提交”。

于 2013-01-25T09:36:30.080 回答
0

您可以使用单个 .submit() 函数实现两种表单提交功能，而不是使用按键和单击。你必须改变你<input type="button" id="btn_signin" value="Sign In">的<input type="submit" id="btn_signin" value="Sign In">

$("#password").submit(function(){

var parameters = $('#signin_form').serialize();

        $.ajax({
            url: baseurl + 'loginRequest',
            type: 'POST',
            data: parameters,
            dataType: 'json',
            success: function(output_str){
                if(output_str == "success"){

                    window.location.replace(window.location);
                }else{
                    $('#result').html(output_str);
                }
            }
        });

});
于 2013-01-25T09:38:25.127 回答