4

jQuery AJAX リクエストで送信されるかなり単純なログイン フォームがあります。現在、フォームを送信するには「ログイン」ボタンを押すしか方法がありませんが、ユーザーが「Enter」を押したときにフォームを送信できるようにしたいと考えています。

jQuery AJAX リクエストを使用してフォーム送信しか行ったことはありませんが、ユーザーが「Enter」を押したときにフォームも送信されるようにするには、どのような変更を加える必要があるかわかりません。

HTML:

<form>

    <label for="username">Username</label>
    <input type="text" id="username" placeholder="Username" />

    <label for="password">Password</label>
    <input type="text" id="password" placeholder="Password" />

</form>

<button id="login">Login</button>

JavaScript:

$(document).ready(function() {

    $('#login').click(function() {

        $.ajax({
            type: "POST",
            url: 'admin/login.php',
            data: {
                username: $("#username").val(),
                password: $("#password").val()
            },
            success: function(data)
            {
                if (data === 'Correct') {
                    window.location.replace('admin/admin.php');
                }
                else {
                    alert(data);
                }
            }
        });

    });

});

login.php からの抜粋:

$stmt = $pdo->prepare("SELECT * FROM users WHERE username = :username AND password = :password");
$stmt->execute(array(
    ':username' => $user,
    ':password' => $pass
));

$rows = $stmt->fetchAll(PDO::FETCH_ASSOC);

$affected_rows = $stmt->rowCount();

if ($affected_rows == 1) {
    //add the user to our session variables
    $_SESSION['username'] = $username;
    echo ('Correct');
} else {
    echo 'Incorrect username/password';
}
4

3 に答える 3

8

フォームに ID を追加し、ログイン ボタンを送信ボタンに変換します。

<form id="myform">

<label for="username">Username</label>
<input type="text" id="username" placeholder="Username" />

<label for="password">Password</label>
<input type="text" id="password" placeholder="Password" />

<input type="submit" id="login" value="Login"/>

</form>

次に、クリックイベントを使用する代わりに:

$('#login').click(function() {

送信イベントを使用します。

$('#myform').submit(function() {
于 2012-12-05T01:56:33.700 に答える
1

HTML

<form id='myfrm'>
    <label for="username">Username</label>
    <input type="text" id="username" placeholder="Username" />

    <label for="password">Password</label>
    <input type="text" id="password" placeholder="Password" />

    <button id="login">Login</button> 
</form>

JavaScript:

$(document).ready(function() {

    $('#myform').submit(function() {

        $.ajax({
            type: "POST",
            url: 'admin/login.php',
            data: {
                username: $("#username").val(),
                password: $("#password").val()
            },
            success: function(data)
            {
                if (data === 'Correct') {
                    window.location.replace('admin/admin.php');
                }
                else {
                    alert(data);
                }
            }
        });
        //this is mandatory other wise your from will be submitted.
        return false; 
    });

});
于 2017-04-25T06:30:47.993 に答える
0 
​$('form').on('keyup', function(e){
    if(e.which == 13 || e.keyCode == 13){
        alert('enter pressed');
    }        
});​​
于 2012-12-05T01:52:32.773 に答える