У меня довольно простая форма входа, которая отправляется с помощью запроса 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'; }
Добавьте идентификатор в форму и преобразуйте кнопку входа в кнопку отправки:
<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() {
$('form').on('keyup', function(e){ if(e.which == 13 || e.keyCode == 13){ alert('enter pressed'); } });
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; }); });