CODEWITHSUNDEEP
javascriptjquery
alim1990
alim1990

Reputation: 4972

Submit html form when hitting enter using jQuery

I want the login form to be submitted whether we click on the login button or by hitting Enter Key.

The HTML form is:

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

I used the following method in 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");
            }
        }
    })

}

And:

$(document).ready(function()
{

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

    });
});

The on click method is working properly but when I hit enter in any place in the form nothing happened, plus if the username and password are incorrect I can't see the alert message.

Upvotes: 0

Views: 101

Answers (4)

Geee
Geee

Reputation: 2249

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

Upvotes: 1

Sangeetha DH
Sangeetha DH

Reputation: 23

loginBtn selector is wrongly given. Please use # for the id selector. 

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

and write call the function loginFunction on the event of loginBtn click.

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

  loginFunction();

});

Upvotes: 0

codemirror
codemirror

Reputation: 3572

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

Upvotes: 1

brk
brk

Reputation: 50291

Change the button type to submit. On doing this the form will respond to enter/return event and will trigger first available submit button.

To submit the form on click of 'submit' button $("#myForm").submit(function(event) will be enough.

Using event.preventDefault() since the form is submitted using ajax.Without, the form will get submitted but ajax wont fire

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

Upvotes: 1

Related Questions