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-submitnot 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
Post a Comment