jQuery/AJAX login form submit on enter
ajax, javascript, jquery, php
Solution
Add an ID to your form and transform your login button into a submit button :
<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() {
Problem
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". 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". 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); } } }); }); }); ``` Excerpt from 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'; } ```