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

angularjs, forms, javascript

Solution

`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>

Problem

I'm using AngularJS and I have a form where the user can enter data. At the end of the form I want to have two buttons, one to "save" which will save and go to another page, and another button labeled "save and add another" which will save the form and then reset it - allowing them to enter another entry. How do I accomplish this in angular? I was thinking I could have two submit buttons with ng-click tags, but I'm using ng-submit on the form element. Is there any reason I NEED to be using ng-submit - I can't remember why I started using that instead of ng-click on the button. The code looks something like: ``` <div ng-controller="SomeController"> <form ng-submit="save(record)"> <input type="text" name="shoppingListItem" ng-model="record.shoppingListItem"> <button type="submit">Save</button> <button type="submit">Save and Add Another</button> </form> </div> ``` And in the controller `SomeController` ``` $scope.record = {}; $scope.save = function (record) { $http.post('/api/save', record). success(function(data) { // take action based off which submit button pressed }); } ```

Original source