Enter Key not working on submit button Angularjs

Question

Here is the submit button:

 <input type="submit" ng-click="Showdata()"  class="btn blue pull-right" Text="" />

Here is the text box for email:

 <input type="text" ng-model="texttype" class="form-control" ng-class="eml" placeholder="Enter Email" />

here is the textbox for pass:

  <input type="password" ng-model="passwordtype" class="form-control" ng-class="pass" placeholder="Enter Password" />

Here submit working for the mouse click..But how can i work on enter click?? Here i am using angularjs. How can i submit on both mouse click and enter key press?

You can Also refer to this answer: https://stackoverflow.com/questions/15417125/submit-form-on-pressing-enter-with-angularjs — Prasad Shigwan, Oct 23 '17 at 11:34
use ng-submit instead of ng-click or change type submit to button — Tejas Jain, Oct 23 '17 at 11:35
Please refer below answer: https://stackoverflow.com/questions/15417125/submit-form-on-pressing-enter-with-angularjs — Prasad Shigwan, Oct 23 '17 at 11:35
Here is the Good explanation for your problem https://stackoverflow.com/questions/15417125/submit-form-on-pressing-enter-with-angularjs — Vijay Krishna, Oct 23 '17 at 11:38
Go to your form and insert this code `
` . After you enter the data, on submit of enter your data will be posted. — vipe, Oct 23 '17 at 13:47
I have created Plunker check it out : https://plnkr.co/edit/s9eE25TN4cKkmCcWHdzg?p=info — vipe, Oct 23 '17 at 13:47

score 0 · Accepted Answer · answered Oct 23 '17 at 11:32

Try using ng-enter directive. I think this will help you.

var $scope;
var app = angular.module('miniapp', []).filter('moment', function() {
    return function(dateString, format) {
        return moment(dateString).format(format);
    };
});

app.directive('ngEnter', function () {
    return function (scope, element, attrs) {
        element.bind("keydown keypress", function (event) {
            if(event.which === 13) {
                scope.$apply(function (){
                    scope.$eval(attrs.ngEnter);
                });
 
                event.preventDefault();
            }
        });
    };
});

function Ctrl($scope) {
    $scope.DoWork = function(){
          alert('Hello World! ' + $scope.MyText);  
    };
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="miniapp">
    <div ng-controller="Ctrl">
        <input ng-enter="DoWork()" ng-model="MyText" />
    </div>    
</div>

It is working somehow but when the text box having null value it is not hit the button — asasasaa, Oct 23 '17 at 11:47
there is the validation if no value then this span becomes true — asasasaa, Oct 23 '17 at 12:34

score 0 · Answer 2 · answered Oct 23 '17 at 11:33

0

you need to use the form tag with ng-submit

<form name="sampleForm" ng-submit="Showdata()">

  <input type="text" ng-model="texttype" class="form-control" ng-class="eml" placeholder="Enter Email" />    
  <input type="password" ng-model="passwordtype" class="form-control" ng-class="pass" placeholder="Enter Password" />
  <input type="submit"  class="btn blue pull-right" Text="" />   

</form>

answered Oct 23 '17 at 11:33

Sachila Ranawaka

39,756
7
56
80

Its not working..my form structure is just like this..but not working – asasasaa Oct 23 '17 at 11:36
@asasasaa check this https://stackoverflow.com/questions/32248651/angular-ng-submit-enter-key-not-working – Sachila Ranawaka Oct 23 '17 at 11:41

score 0 · Answer 3 · answered Oct 23 '17 at 11:55

0

Add one class named like "searchTextbox" in input field And then use that code

    $('.searchTextbox').keypress(function (event) {
                if (event.which == 13) {
                    $scope.Showdata();
                }
            });


<input type="text" ng-model="texttype" class="form-control searchTextbox " ng-class="eml" placeholder="Enter Email" />

answered Oct 23 '17 at 11:55

Jinal Mehta

171
6

May be it's working for both mouse click and enter key. – Jinal Mehta Oct 23 '17 at 11:56

Enter Key not working on submit button Angularjs

3 Answers3