Pressing Enter doesn't work with AngularJS

Question

I am having a problem with using 'enter button' on the keyboard with an angular js login form. I know this question is asked before but I believe that my problem is a bit different because I tried almost everything written on the stackoverflow questions.

So, I just want to be able to hit enter and submit the form with only using the enter key on keyboard.

Here is login html:

<!-- BEGIN LOGIN FORM -->
<form ng-submit="loginCtrl.login()" class="login-form">
    <h3 class="form-title">Sign In</h3>
    <div class="alert alert-danger display-hide">
        <button class="close" data-close="alert"></button>
            <span>
            Enter any username and password. </span>
    </div>
    <div class="form-group">
        <!--ie8, ie9 does not support html5 placeholder, so we just show field title for that-->
        <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="Company/username"
               ng-model="loginCtrl.username" name="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"
               ng-model="loginCtrl.password" name="password"/>
    </div>
    <div class="form-actions">
        <input type="submit" class="btn btn-success uppercase" value="Login">
    </div>

   </form>
<!-- END LOGIN FORM -->

and here is my login:

self.login = function() {

        var result = self.username.split("/");
        var account = result[0];
        var userId = result[1];

            UserService.login(userId, self.password,account).then(function(user) {
            self.userAccount = user;

            $state.go('home');

        }, function(err) {
           alert("Authentication failure: Please check your credentials. ")
        });

I get user name as "companyName/Username" so it is like: amazon/bigboby

nothing unusual about the html that would prevent it. Are you sure the problem isn't with your submit function? Create a demo that replicates your problem and provide a better problem description — charlietfl, Oct 06 '15 at 20:13
and your form should have a `name` for angular form directive also — charlietfl, Oct 06 '15 at 20:16
Try adding the `type` attribute to your ``. I had a problem like this before, but I don't quite recall the reason for it. I believe it has something to do w/how Angular detects where the submit button is on the form. By not specifying the type you are fooling it. My lesson from before was to always use the `type` attribute on buttons (other valid types are "submit" and "reset"). — Sunil D., Oct 06 '15 at 20:22
@SunilD. thank you so much! Your solution worked just fine! Thanks a lot. — Mustafa Bereket, Oct 06 '15 at 20:35
@MustafaBereket While you were doing that, I found out where it is explained in the Angular docs and posted an answer for you :) — Sunil D., Oct 06 '15 at 20:36

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

I'm pretty sure your problem is caused by this <button> tag:

<button class="close" data-close="alert"></button>

The answer is found in the documentation:

You can use one of the following two ways to specify what javascript method should be called when a form is submitted:

ngSubmit directive on the form element

ngClick directive on the first button or input field of type submit (input[type=submit])

Note the comment about how it looks for an ng-click handler on the first button. When you are pressing ENTER to submit the form, Angular looks at the form and sees that button. It would execute the ng-click handler on that button (if it had one).

If you include the type attribute on the button, you can prevent that and let it find the actual submit button:

<button type="button" class="close" data-close="alert"></button>

Thanks a lot, I guess that makes sense, it gets confused if there is multiple buttons within the form. So just typing ' type="button" ' worked fine. — Mustafa Bereket, Oct 06 '15 at 20:43

Pressing Enter doesn't work with AngularJS

1 Answers1