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();
        }

    });
});

点击方法工作正常，但是当我在表格中的任何地方点击输入时没有发生任何事情，加上如果用户名和密码不正确，我看不到提示信息。

Answer 1

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

点击“提交”提交表单＆＃39;按键 $("#myForm").submit(function(event)就足够了。

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

＆＃13;

$(document).ready(function() {
  $("#myForm").submit(function(event) {
    event.preventDefault();
    loginFunction();
  })
})


var loginFunction = function() {
  alert('Hello');
  //rest of the code


}

＆＃13;

<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>

＆＃13;

Answer 2

$(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 3

＆＃13;

$('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
  }
});

＆＃13;

<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>

＆＃13;

Answer 4

错误地给出了

loginBtn 选择器。请使用＃作为ID选择器。

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

并在loginBtn点击事件时调用函数 loginFunction 。

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

  loginFunction();

});

使用jQuery命令输入时提交html表单

4 个答案: