最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - AngularJS form not submitting when pressing enter - Stack Overflow

programmeradmin1浏览0评论

I'm trying to get a login-form to submit when the user presses enter. The form works perfectly fine when the "Login"-button is clicked, but pressing enter doesn't work and furthermore, causes a strange behavior:

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

Here's my 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" autoplete="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" autoplete="off" placeholder="Password" name="password" ng-model="password"/>
    </div>
    <div class="form-actions">
        <button class="btn btn-success uppercase">Login</button>
    </div>
</form>

Note that I tried replacing <button...> with <input type="submit"...> with no success either.

The corresponding controller with the login()-function looks as 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 and use angular-ui-router v.0.2.15 for routing.

Thanks for any input, much appreciated.

I'm trying to get a login-form to submit when the user presses enter. The form works perfectly fine when the "Login"-button is clicked, but pressing enter doesn't work and furthermore, causes a strange behavior:

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

Here's my 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" autoplete="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" autoplete="off" placeholder="Password" name="password" ng-model="password"/>
    </div>
    <div class="form-actions">
        <button class="btn btn-success uppercase">Login</button>
    </div>
</form>

Note that I tried replacing <button...> with <input type="submit"...> with no success either.

The corresponding controller with the login()-function looks as 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 and use angular-ui-router v.0.2.15 for routing.

Thanks for any input, much appreciated.

Share Improve this question asked Jul 8, 2015 at 11:48 user1631668user1631668 2
  • stackoverflow./questions/15417125/… – Gopinath Shiva Commented Jul 8, 2015 at 11:53
  • Thanks Gophinath - I've stumbled upon this answer already when looking for an answer to my question. I haven't tried out the custom directive that listens for enter-presses (key nr. 13) because I don't intend to do workarounds when angular obviously claims that by using ng-submit the form should submit out of the box. – user1631668 Commented Jul 8, 2015 at 12:47
Add a ment  | 

2 Answers 2

Reset to default 5

Put this one

 <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 be 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" autoplete="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" autoplete="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 your LoginCtrl is places above your form DOM.

EDIT CODE :

Please check this Plunker

Instead of Button use <input type ="submit" />

发布评论

评论列表(0)

  1. 暂无评论