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

You can see my answer with working demo [here](http://stackoverflow.com/questions/27498666/submit-form-while-key-press-in-angular-js/27498701#27498701) — Hüseyin BABAL, Dec 16 '14 at 06:29
possible duplicate of [Submit form on pressing Enter with AngularJS](http://stackoverflow.com/questions/15417125/submit-form-on-pressing-enter-with-angularjs) — hon2a, Dec 16 '14 at 07:12

Hüseyin BABAL · Answer 1 · 2014-12-16T06:28:58.790

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 '14 at 06:28

answered Dec 16 '14 at 06:22

Hüseyin BABAL

15,400
4
51
73

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. – Sha Dec 16 '14 at 07:50
Yes, it will work. Because, it is submit button and it triggers the submit event of form. And ng-submit handles that – Hüseyin BABAL Dec 16 '14 at 08:49

Submit form while key press in Angular JS

1 Answers1