Javascript jQuery/AJAX 登录表单在输入时提交
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13715081/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery/AJAX login form submit on enter
提问by Jordan
I have a fairly simple login form that is submitted with a jQuery AJAX request. Currently, the only way to submit it is to press the "Login" button, but I would like to be able to submit the form when the user presses "Enter".
我有一个相当简单的登录表单，它通过 jQuery AJAX 请求提交。目前，提交它的唯一方法是按“登录”按钮，但我希望能够在用户按“Enter”时提交表单。
I have only ever done form submissions using jQuery AJAX requests, but I'm unsure of what modifications I would need to make in order to have the form also be submitted when the user presses "Enter".
我只使用 jQuery AJAX 请求完成表单提交，但我不确定我需要进行哪些修改才能在用户按下“Enter”时提交表单。
HTML:
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:
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);
}
}
});
});
});
Excerpt from login.php:
摘自 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';
}
回答by tmuguet
Add an ID to your form and transform your login button into a submit button :
将 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>
Then, instead of using the click event:
然后，而不是使用点击事件：
$('#login').click(function() {
use the submit event:
使用提交事件：
$('#myform').submit(function() {
回答by Ohgodwhy
?$('form').on('keyup', function(e){
if(e.which == 13 || e.keyCode == 13){
alert('enter pressed');
}
});??
回答by Juned Ansari
HTML
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:
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;
});
});
