jQuery/AJAX登录表单提交输入

Question

我有一个相当简单的登录表单，提交了一个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：

$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'; 
} 

Answer 1

添加ID到您的形式和改变你的登录按钮到：

$(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一个提交按钮：

<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> 

然后，而不是使用Click事件：

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

使用提交事件：

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

Answer 2

​$('form').on('keyup', function(e){ 
    if(e.which == 13 || e.keyCode == 13){ 
     alert('enter pressed'); 
    }   
});​​ 

Answer 3

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> 

JavaScr IPT：

$(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; 
    }); 

});