3

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" 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 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.

bac
  • 226
  • 3
  • 10
  • http://stackoverflow.com/questions/15417125/submit-form-on-pressing-enter-with-angularjs – Gopinath Shiva Jul 08 '15 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. – bac Jul 08 '15 at 12:47

2 Answers2

6

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

EDIT CODE :

Please check this Plunker

RIYAJ KHAN
  • 15,032
  • 5
  • 31
  • 53
  • 1
    I already tried putting an input of type submit instead of a button, with no luck. I now tried to set the controller separatly in a div one level higher up (`
    `) but with no success either. Also, i think ui-router correctly sets the scope (and controller) already.
     – bac Jul 08 '15 at 12:44
  • had you checked error in console?Is it possible to create fiddle? – RIYAJ KHAN Jul 08 '15 at 17:19
  • Unfortunately, there's no error showing up, just nothing is happening when I press enter. Strange is that when pressing enter, the "save password" dialog from the browser-plugin 1Password shows up, so somehow the submit is being recognized. However, `console.log("logging in");` (see JS code above) is never being displayed in the console when trying to submit the form with enter, only when clicking the login button. – bac Jul 09 '15 at 08:02
  • I have added plunker.Please check it – RIYAJ KHAN Jul 09 '15 at 08:33
  • Thanks RIYAJ, your plunker works fine for me here. Honestly, my code is no different than you plunker but still doesn't work. I think it must have something to do with an additional module I'm loading... strange. I have now added a custom directive that triggers my login function when it detects that Enter has been pressed within the form, see http://stackoverflow.com/questions/18369986/angularjs-on-enter-directive-on-form-input-no-saving-model-value/31312264#31312264 – bac Jul 09 '15 at 08:38
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/82790/discussion-between-riyaj-khan-and-bacbos). – RIYAJ KHAN Jul 09 '15 at 08:41
1

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

ElGavilan
  • 6,610
  • 16
  • 27
  • 36
Pankaj Ladhar
  • 155
  • 6
  • 1
    I already tried that, see the comment after my HTML code in the original question – bac Jul 08 '15 at 12:43
  • **1.** Keep the `` tag within the `
    ` tags **2.** Make sure the `type="submit"`. and it should work....If you don't want the input, then set `ng-hide="true"` as input `attribute` but it needs to be there even if you don't need a button... `
    ...
    `     – Aakash Jan 27 '16 at 05:00