使用 jQuery 敲击回车时提交 html 表单

Question

无论我们点击登录按钮还是按 Enter 键，我都希望提交登录表单。

HTML 表单是：

 <form id="myForm" role="form" class="login-form">
 <div class="form-group">
    <label class="sr-only" for="form-username">Username</label>
    <input type="text" name="form-username" id="form-username" placeholder="Username..." class="form-username form-control" id="form-username">
    </div>
 <div class="form-group">
    <label class="sr-only" for="form-password">Password</label>
    <input type="password" name="form-password" id="form-password" placeholder="Password..." class="form-password form-control" id="form-password">
 </div>
    <button type="button" name="loginBtn" id="loginBtn" class="btn btn-danger">Login</button>
</form>

我在jQuery中使用了以下方法：

var loginFunction = function(){
var userTxt = document.getElementById("form-username").value;
var passTxt = document.getElementById("form-password").value;
if(userTxt !="" && passTxt != "")
{
    $.ajax({
        url: './php/login.php',
        type: 'POST',
        dataType: 'text',
        data: {user: userTxt, pass: passTxt},

        success:function(res3)
        {
            if(res3=="correct")
            {
                window.location.href='./pages/home.php';
            }
        },
        error:function(res3) {
            if(res3=="incorrect")
            {
                alert("Username and Password are incorrect");
            }
        }
    })

} 

还有：

$(document).ready(function()
{

    $("#loginBtn").on('click', loginFunction);
    $("#form-password").keypress(function(event)
    {
        if(event.which == 13)
        {
            //event.preventDefault();
            $("loginBtn").click();
        }

    });
});

on click 方法工作正常，但是当我在表单中的任何位置按 Enter 时，什么也没发生，而且如果用户名和密码不正确，我将看不到警报消息。

Answer 1

$('form').keypress(function (e) {
  if (e.which == 13) {
    alert('submit form');
    //Submit form
    $('form#myForm').submit();
    // your validations and ajax call goes here..
    return false;    //<---- Add this line
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm" role="form" class="login-form">
 <div class="form-group">
    <label class="sr-only" for="form-username">Username</label>
    <input type="text" name="form-username" id="form-username" placeholder="Username..." class="form-username form-control" id="form-username">
    </div>
 <div class="form-group">
    <label class="sr-only" for="form-password">Password</label>
    <input type="password" name="form-password" id="form-password" placeholder="Password..." class="form-password form-control" id="form-password">
 </div>
    <button type="button" name="loginBtn" id="loginBtn" class="btn btn-danger">Login</button>
</form>

Answer 2

将按钮类型更改为submit。执行此操作时，表单将响应 enter/return 事件并触发第一个可用的提交按钮。

点击“提交”按钮提交表单 $("#myForm").submit(function(event) 就够了。

使用event.preventDefault()，因为表单是使用ajax提交的。没有，表单将被提交但ajax不会触发

$(document).ready(function() {
  $("#myForm").submit(function(event) {
    event.preventDefault();
    loginFunction();
  })
})


var loginFunction = function() {
  alert('Hello');
  //rest of the code


}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm" role="form" class="login-form">
  <div class="form-group">
    <label class="sr-only" for="form-username">Username</label>
    <input type="text" name="form-username" id="form-username" placeholder="Username..." class="form-username form-control" id="form-username">
  </div>
  <div class="form-group">
    <label class="sr-only" for="form-password">Password</label>
    <input type="password" name="form-password" id="form-password" placeholder="Password..." class="form-password form-control" id="form-password">
  </div>
  <button type="submit" name="loginBtn" id="loginBtn" class="btn btn-danger">Login</button>
</form>

Answer 3

$(document).ready(function()
{   
    $("#loginBtn").on('click', loginFunction);

    $("#form-password").keypress(function(event)
    {
        if(event.which == 13)
        {
            //event.preventDefault();
            $("loginBtn").click();
        }

    });

    $("#loginBtn").bind('keydown', function(e){         
        if (e.which == 13){
           $('#loginBtn').trigger('click');   
        }     
    });
});

Answer 4

loginBtn 选择器输入错误。 请使用 # 作为 id 选择器。

if(event.which == 13)
    {           
        $("#loginBtn").click();
    }

并编写在 loginBtn 点击事件上调用函数 loginFunction。

$( "#loginBtn" ).click(function() {

  loginFunction();

});