jQuery的/ AJAX登录表单上输入提交 [英] jQuery/AJAX login form submit on enter

问题描述

我有一个提交与jQuery的AJAX请求一个相当简单的登录表单。目前，提交的唯一办法是preSS的登录按钮，但我希​​望能够提交，当用户presses输入的形式。

我只做过表单提交使用jQuery AJAX请求，但我不能确定什么修改，我需要做，才能有表单也可以提交当用户pressesEnter键。

HTML：

 ＆LT;形式GT;

    ＆LT;标签=用户名和GT;用户名和LT; /标签＆gt;
    ＆LT;输入类型=文本ID =用户名占位符=用户名/＆GT;

    ＆LT;标签=密码＆GT;密码＆LT; /标签＆gt;
    ＆LT;输入类型=文本ID =密码占位符=密码/＆GT;

＆LT; /形式GT;

＆LT;按钮ID =登录＆GT;登录＆LT; /按钮＆GT;
 

JavaScript的：

  $（文件）。就绪（函数（）{

    $（'＃登录）。点击（函数（）{

        $阿贾克斯（{
            键入：POST，
            网址：管理/ login.php中'，
            数据： {
                用户名：$（＃用户名）VAL（）。
                密码：$（＃密码）VAL（）。
            }，
            成功：函数（数据）
            {
                如果（数据==='正确'）{
                    window.location.replace（管理/ admin.php文件）;
                }
                其他 {
                    警报（数据）;
                }
            }
        }）;

    }）;

}）;
 

从login.php中摘录：

  $语句= $ pdo-＆GT; prepare（SELECT * FROM用户其中username =：用户名和密码=：密码）;
$ stmt-＆GT;执行（阵列（
    ：用户名=＆GT; $用户，
    '：密码'=＆GT; $传球
））;

$行数= $ stmt-＆GT;使用fetchall（PDO :: FETCH_ASSOC）;

$ affected_rows = $ stmt-＆GT; rowCount时（）;

如果（$ affected_rows == 1）{
    //将用户添加到我们的会话变量
    $ _SESSION [用户名] = $的用户名;
    回声（正确）;
} 其他 {
    回声错误的用户名/密码;
}
 

解决方案

添加一个ID为您的形式，将您的登录按钮变成一个提交按钮：

 ＆LT;形式ID =MyForm的＆GT;

＆LT;标签=用户名和GT;用户名和LT; /标签＆gt;
＆LT;输入类型=文本ID =用户名占位符=用户名/＆GT;

＆LT;标签=密码＆GT;密码＆LT; /标签＆gt;
＆LT;输入类型=文本ID =密码占位符=密码/＆GT;

＆LT;输入类型=提交ID =登陆值=登陆/＆GT;

＆LT; /形式GT;
 

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

  $（'＃登录）。点击（函数（）{
 

使用提交事件：

  $（'＃MyForm的）。递交（函数（）{
 

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

解决方案

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() {

这篇关于jQuery的/ AJAX登录表单上输入提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！