javascript - AngularJS form not submitting when pressing enter -


i'm trying login-form submit when user presses enter. form works fine when "login"-button clicked, pressing enter doesn't work , furthermore, causes strange behavior:

  • the function associated ng-submit not being executed
  • the error message (login failed) never being displayed again after pressing enter

here's markup:

<form ng-submit="login()" class="login-form">     <div class="alert alert-danger" ng-class="{ 'display-hide': !showerror }">         <button class="close" data-close="alert"></button>             <span> login failed </span>     </div>     <div class="form-group">         <label class="control-label visible-ie8 visible-ie9">username</label>         <input class="form-control form-control-solid placeholder-no-fix" type="text" autocomplete="off" placeholder="username" name="username" ng-model="username"/>     </div>     <div class="form-group">         <label class="control-label visible-ie8 visible-ie9">password</label>         <input class="form-control form-control-solid placeholder-no-fix" type="password" autocomplete="off" placeholder="password" name="password" ng-model="password"/>     </div>     <div class="form-actions">         <button class="btn btn-success uppercase">login</button>     </div> </form> 

note tried replacing <button...> <input type="submit"...> no success either.

the corresponding controller login()-function looks follows:

.controller('loginctrl', ['$rootscope', '$scope', ..., function logincontroller ($rootscope, $scope, ...) {     $scope.showerror = false;      $scope.login = function()     {         console.log("logging in");         $http({             url: $scope.apiendpointlogin,             method: 'post',             data: {'username': this.username, 'password': this.password}         }).then(function(response) {             $scope.showerror = false;              [...]         }, function() {             $scope.showerror = true;         });      }; }]); 

i run angular v1.4.0 , use angular-ui-router v.0.2.15 routing.

thanks input, appreciated.

put 1

 <input type="submit" class="btn btn-success uppercase" value="login" >  

instead of

 <button class="btn btn-success uppercase">login</button> 

for form submitting button should type of submit.

edit code :

<form   class="login-form"  ng-submit="login()" >     <div class="alert alert-danger" ng-class="{ 'display-hide': !showerror }">         <button class="close" data-close="alert"></button>             <span> login failed </span>     </div>     <div class="form-group">         <label class="control-label visible-ie8 visible-ie9">username</label>         <input class="form-control form-control-solid placeholder-no-fix" type="text" autocomplete="off" placeholder="username" name="username" ng-model="username"/>     </div>     <div class="form-group">         <label class="control-label visible-ie8 visible-ie9">password</label>         <input class="form-control form-control-solid placeholder-no-fix" type="password" autocomplete="off" placeholder="password" name="password" ng-model="password"/>     </div>     <div class="form-actions">         <input  type="submit" class="btn btn-success uppercase"  >     </div>  </form> 

also please check whether loginctrl places above form dom.

edit code :

please check plunker


Comments

Popular posts from this blog

toolbar - How to add link to user registration inside toobar in admin joomla 3 custom component -

linux - disk space limitation when creating war file -

How to provide Authorization & Authentication using Asp.net, C#? -