Submit form while key press in Angular JS

Question

I have a login form as follows. login Controller is called when the login button is clicked and it is working fine. I need the same function to be called on the "Enter" key press after entering the Username and Password.

  <form class="form-horizontal">
   <fieldset>
   <div class="form-group">
     <input type="text"
        class="form-control input-lg input-round text-center"
        placeholder="Username"
        ng-model="uservals">
   </div>
  <div class="form-group">
     <input type="password"
        class="form-control input-lg input-round text-center"
        placeholder="Password"
        ng-model="passvals">
  </div>
  <div class="form-group">
     <a href="#/" class="btn btn-primary btn-lg btn-round btn-block text-center" ng-click="log_me()">Log in</a>
  </div>
  </fieldset>
  </form>

Controller

var mysession = '';
function loginController($scope, $http, $cookieStore, $location) {
$scope.sess_id = mysession;
var token = $cookieStore.get('token');
var conId = $cookieStore.get('Cont_Id');
var exId = $cookieStore.get('ex_Id');
$scope.log_me = function() {
    $scope.login_me = [];
    var login_un = $scope.uservals;
    var login_pwd = $scope.passvals;
    var logs_me = "http://www.vb.com/login.html?username=" + login_un + "&password=" + login_pwd;
    $http.get(logs_me)
        .success(function(response) {
            $cookieStore.put('token', response.token);
            $cookieStore.put('ex_Id', response.ExId);
            $cookieStore.put('Cont_Id', response.contactId);
            $cookieStore.put('email', response.email);
            $cookieStore.put('name', response.name);
            mysession = response.ss_id;
            if (response.status == "failure") {
                $('.login_error').show();
                $('.login_error').html('Invalid username or password');
                $('.login_error').delay(4000).fadeOut();
                $('.loading').hide();
            } else {
                $('.page-signin').hide();
                $('.signin-header').hide();
                $location.path('/dashboard');
                }
              });
      }
  }

possible duplicate of Submit form on pressing Enter with AngularJS — hon2a
– hon2a, Commented Dec 16, 2014 at 7:12

Hüseyin BABAL · Accepted Answer · 2014-12-16 06:28:58Z

4

Demo

Change your form like this;

<form class="form-horizontal" ng-submit="log_me()">

And then update your button to submit button like below;

<input type="submit" class="btn btn-primary btn-lg btn-round btn-block text-center" value="Log in"/>

This will automatically submit your form when you click Enter key.

edited Dec 16, 2014 at 6:28

answered Dec 16, 2014 at 6:22

Hüseyin BABAL

15.6k5 gold badges53 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sha Over a year ago

Thanks for your solution. But will it work on button press if i remove ng-click="login_me()" from the submit button? i want it to work both the ways.

Hüseyin BABAL Over a year ago

Yes, it will work. Because, it is submit button and it triggers the submit event of form. And ng-submit handles that

Collectives™ on Stack Overflow

Submit form while key press in Angular JS

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related