How to Handle Multiple Submit Buttons in a Form Using Angular Js

How to handle multiple submit buttons in a form using Angular JS?

ngSubmit allows you to press Enter while typing on the textbox to submit. If that behavior isn't important, just use 2 ngClick. If it is important, you can modify the second button to use ngClick. So your code becomes:

<div ng-controller="SomeController">
    <form ng-submit="save(record)">
        <input type="text" name="shoppingListItem" ng-model="record.shoppingListItem">
        <button type="submit">Save</button>
        <button ng-click="saveAndAdd(record)">Save and Add Another</button>
    </form>
</div>

Angular Two buttons to submit a form but with different purpose

I found an answer. A bit tricky:
In the onSubmit event I check:

var buttonName = document.activeElement.getAttribute("Name");

Since one of the button must be the active element on the form when the user click it, this does the trick for me

angular- bind form submit with multiple buttons

The solution was to put the directive on the submit button, and use directive 'require':

<form>
   <button my-form-submit="foo()"></button>
</form>

angular.module('myFormSubmit', [])
    .directive('myFormSubmit', function() {
        return {
            require: '^form',
            scope: {
                callback: '&myFormSubmit'
            },
            link: function(scope, element, attrs, form) {
                element.bind('click', function (e) {
                    if (form.$valid) {
                        scope.callback();
                    }
                });
            }
        };
    });

How to handle multiple forms present in a single page using AngularJS

var app = angular.module('app', []);app.controller('XceptionController', function($scope) {  $scope.form = {};  $scope.selectedForm = null;  $scope.selectForm = function() {    // reset the form model object    $scope.form = {};  };  $scope.isSelected = function(formName) {    return $scope.selectedForm === formName;  };  $scope.submitForm = function(form) {    // form data    console.log(form);  };});
app.controller('FirstFormController', function($scope) {
});
app.controller('SecondFormController', function($scope) {
});

<div ng-app="app">  <div class="container" ng-controller="XceptionController">    <form class="form-container">      <select id="select-form" ng-change=selectForm() ng-model="selectedForm">        <option value="" disabled selected>Select an Option</option>        <option value="firstform">Get Firstname</option>        <option value="secondform">Get Lastname</option>      </select>    </form>
    <div ng-controller="FirstFormController" class="firstform" ng-show="isSelected('firstform')">      <form name="firstnameform">        <input type="text" name="firstname" ng-model="form.firstname" id="firstname">        <label for="#firstname">Firstname</label>      </form>      <div class="content">        <p>Firstname is {{form.firstname}}</p>      </div>    </div>    <div ng-controller="SecondFormController" class="secondform" ng-show="isSelected('secondform')">      <form name="lastnameform">        <input type="text" name="lastname" ng-model="form.lastname" id="lastname">        <label for="#lastname">Lastname</label>      </form>      <div class="content">        <p>Lastname is {{form.lastname}}</p>      </div>    </div>    <button ng-click="submitForm(form)">Submit</button>  </div></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

How to send multiple forms data in one shot to server using angularjs?

You can bind all your values to a common object. I am enabling the second form after submitting the first form. In second forms submit function, you just have to loop through the values of common object and append it to formData. If you don't have any reason for having two forms, you can consolidate it into one.

Note: I have not added any form validations. For adding form validations, please refer https://codepen.io/sevilayha/pen/xFcdI

HTML:

<form name="form1" ng-submit="enableForm2()">
    <input type="text" name="fname" ng-model="obj.fname" />
    <input type="text" name="lname" ng-model="obj.lname" />
    <input type="submit" value="Next" />
</form>

<form name="form2" ng-show="enableForm" ng-submit="finalSubmit()">
    <input type="text" name="address" ng-model="obj.address" />
    <input type="text" name="state" ng-model="obj.state" />
    <input type="submit" value="Next" />
</form>

JS:

 var app = angular.module('myApp', []);
 app.controller('myCtrl', function($scope, $http) {
     $scope.obj = {};
     $scope.enableForm = false;
     $scope.enableForm2 = function() {
         $scope.enableForm = true;
     }
     $scope.finalSubmit = function() {
         $http({
             method: 'POST',
             url: YourURL,
             withCredentials: true,
             headers: {
                 'Content-Type': undefined
             },
             data: {},
             transformRequest: function(data, headersGetter) {
                 var formData = new FormData();
                 angular.forEach($scope.obj, function(value, key) {
                     formData.append(key, value);
                 })
                 return formData;
             }
         }).then(function(data) {
            $scope.enableForm=false;
           }).catch(function(data, status) {

          })
     }
 });

How to Handle Multiple Submit Buttons in a Form Using Angular Js