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

キーを押してクリックする代わりに、単一の .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 に答える
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

これはあなたが求めているものだと思います

$("#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 に答える