CODEWITHSUNDEEP
javascriptjqueryangularjs
Neha Gupta
Neha Gupta

Reputation: 1067

How to stop event propagation in AngularJS

When i am clicking on the "Sign Up" button, it is also going to the handler of "login" button. I have used $event.stopPropagation() for "Sign Up" button to avoid it, but it is not working.

The code - 

<form role="form" ng-submit="login(userName, password)" class="form-horizontal">
    <div class="form-group">
      <label for="usrNm" class="col-sm-2 control-label">Username</label>
      <div class="col-sm-10">
        <input type="email" id="usrNm" ng-model="userName" class="form-control input-lg" placeholder="Enter email"/>
      </div>
    </div>
    <div class="form-group">
      <label for="pwd" class="col-sm-2 control-label">Password</label>
      <div class="col-sm-10">
        <input type="password" id="pwd" ng-model="password" class="form-control input-lg" placeholder="Password"/>
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <button class="btn btn-default">LOGIN</button>
        <button class="btn" ng-click="register(); $event.stopPropagation();">SIGN UP</button>
      </div>
    </div>
  </form>

controller.js - 

expmodule.controller('loginForm', function($scope, sharedProperties) {
  var auth;
$scope.login = function (userid, password) {
  auth = sharedProperties.session.isAuthenticated(userid, password);
  if (auth) {
    alert("Welcome "+userid);
    window.location = "home.html";
  } else {
    alert("Invalid Login");
  }
}
$scope.register = function () {
  window.location = "register.html";

}

});

Upvotes: 0

Views: 354

Answers (1)

anddoutoi
anddoutoi

Reputation: 10111

The default behaviour for <button>s is to submit the form they are part of.

Change your code to this:

<button class="btn btn-default">LOGIN</button>
<button type="button" class="btn" ng-click="register();">SIGN UP</button>

Upvotes: 2

Related Questions