Angular.js What is the best way to determine which button caused submit?

Question

I have two buttons on a simple login form in a dropdown on a header bar that is outside of the view/content part of my single page app. There are two buttons on the form:

EDIT: both buttons need to submit the form, but I have two different outcomes; one does new member sign-up, the other login existing members. I do not want to handle this on multiple partials.

My Website

    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav navbar-right">
        <li class="active">
          <a href="#/home">Home</a>
        </li>
        <li class="divider-vertical"></li>
        <li>
          <div class="btn-group btn-group-xs navbar-btn btn-pad">
            <a href="#" class="btn navbar-btn btn-default">NL</a>
            <a href="#" class="btn navbar-btn btn-default">FR</a>
            <a href="#" class="btn navbar-btn btn-default">EN</a>
          </div>
        </li>
        <li class="divider-vertical"></li>
        <!-- Begin Login Section -->
        <li class="dropdown">
          <a class="dropdown-toggle" href="#" data-toggle="dropdown">Signup/Login <strong class="caret"></strong></a>
          <div class="dropdown-menu">
            <div class="accountForm">
              <!--form action="#" method="post" role="form"-->
              <form name="loginForm" ng-submit="login()" ng-controller="homeController">
                <div class="form-group">
                  <label class="control-label" for="username">Username</label>
                  <input type="text" ng-model="credentials.username" name="username" class="form-control input-sm" placeholder="username" required/>
                </div>
                <div class="form-group">
                  <label class="control-label" for="password">Password</label>
                  <input type="password" ng-model="credentials.password" name="password" class="form-control input-sm" placeholder="password"  required/>
                </div>
                <div class="form-group">
                  <label class="control-label" for="remember">
                    <input type="checkbox" class"form-control" name="remember" value="1"/>Remember me</label>
                </div> 
                <div class="form-group btn-group-justified">
                  <div class="btn-group">
                    <button button-id="join" type="submit" class="btn btn-default">New? Join us</button>
                    <input type="hidden" class="btn" />
                  </div>
                  <div class="btn-group inline">
                    <input type="hidden" class="btn" />
                    <button button-id="login" type="submit" class="btn btn-primary active">Log in</button>
                  </div>
                </div>   
              </form>
            </div>
          </div>
        </li>
        <!-- End Login Section -->
      </ul>
    </div>
    <!--/.nav-collapse -->
  </div>
</div>
<div id="page" ng-view>

The first button is intended to send the user to the login process (if they are already registered) and the second button is for new users to register.

The problem I have is that if I use the <form ng-submit="myFunction()"> directive, I haven't yet found a way to determine the button that was pressed.

I can alternatively create my own directive, where I can determine the button that was pressed, but this seems to be a lot of coding effort by comparison, and is this really the Angular way?

app.directive('buttonId', function() { return { restrict: "A", link: function(scope, element, attributes) {

            element.bind("click", function(){
                // when attributes.buttonId = 'join' 
//call the create script

                // when attributes.buttonId = 'login' 
//call the authenticate script

            });         
        }
    }
});

So my question is simply using ng-submit="myfunction()"can i determine which button was pressed?

Answer 1

I know I am answering my own question, but this seems to be the "correct" way to do this:

<form name="loginForm" ng-submit="login()" ng-controller="homeController">
<div class="form-group btn-group-justified">
  <div class="btn-group">
    <button type="submit" class="btn btn-default" button-id="join">New?Joinus</button>
       <input type="hidden" class="btn" />
  </div>
  <div class="btn-group inline">
    <input type="hidden" class="btn" />
       <button type="submit" class="btn btn-primary active" button-id="login">Log in</button>
  </div>
 </div>   
 </form≥

The above is the section of the form that I'm interested in. Note that both buttons have type="submit"and not type="button" . This is important for two reasons:

1) you can use the standard HTML5 form validation options when you click the buttons 2) it forces the ng-submithandler.

First the controller

app.controller('homeController', function($scope){
$scope.buttons = { chosen: "" };

$scope.login = function (){
// can get the button that was clicked as it is now added to the scope 
    // by the directive
alert($scope.buttons.chosen);

};  
});

... and now the directive. Next I handle the click on either button using a directive. This has the purpose of allowing me to identify the button, and pass it to the $scope. This was actually the main purpose of the excercise, but I realised that I could now bind this to anything where I suspected a click and pass some data to the scope.

app.directive('buttonId', function() {
    return {
    restrict: "A",
    link: function(scope, element, attributes) {
                  element.bind("click", function(){
          // able to get the name of the button and pass it to the $scope
          // this is executed on every click
          scope.buttons.chosen = attributes.buttonId;
          // alert(attributes.buttonId + scope.buttons.chosen);
          });           
        }
    }
});

Answer 2

I am not sure if i have understood your problem correct but you can differential based on

• Calling different function for each ng-submit such as ng-submit="myFunction1()" and ng-submit="myFunction2()"
• You can also do the same passing in context using a parameter ng-submit="myFunction(from)"
• You can also pass in special $event object as parameter ng-submit="myFunction($event)". This object contains the target information.

Answer 3

You can get a handle to the $event in your ng-click, and get its target, and then get its id, but I wouldn't recommend that it is not the angular way of doing things:

<input type="submit" id="test" data-ng-click="showAlert($event)">
    Click Me
</button>


$scope.showAlert = function(event){
    alert(event.target.id);
}

Answer 4

Another way is to set property dirty for this button and then to check which of the buttons is dirty.

For example if you have a form named "myForm" you can write something like this:

<form name="myForm" id="myForm" ng-submit="save()" ng-model="myForm" novalidate>
  <input type="submit" name="save" ng-model="btnSave" ng-click="(frmForm.save.$setDirty())" />
  <input type="submit" name="saveOut" ng-model="btnSaveOut" ng-click="(frmForm.saveOut.$setDirty())" />
</form>

In Javascript file you can handle it by:

if ($scope.btnSave.$dirty){
    alert("First was clicked)}
else{
    alert("First was clicked)}
}