CODEWITHSUNDEEP
javascriptangularjsformsenterng-submit
Mustafa Bereket
Mustafa Bereket

Reputation: 129

Pressing Enter doesn't work with AngularJS

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

Upvotes: 1

Views: 2729

Answers (1)

Sunil D.
Sunil D.

Reputation: 18193

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>

Upvotes: 1

Related Questions