AngularJS - how to use ng-click without submitting the form?

Question

I have a form that has both ng-click and ng-submit.

ng-submit is meant for the submission, while ng-click calls a separate function like upload, etc.

How do I make sure that ng-click does not accidentally submits the form?

thank you!

Possible duplicate: stackoverflow.com/questions/12319758/… — steampowered
– steampowered, Commented Aug 17, 2016 at 20:08

Preview · Accepted Answer · 2015-07-01 12:45:19Z

53

ngClick does not submit the form.

Sometimes, you can have problems because you have two button elements in your form, and they both submit it. To avoid that, specify the type "button" on it. Example :

function demo ($scope) {
  
  $scope.doSubmit = function () {
    alert('I submit');
  };
  
  $scope.doClick = function () {
    alert('I click');
  };
  
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app ng-controller="demo">
  
  <form ng-submit="doSubmit()">
    <button type="button" ng-click="doClick()">click</button>
    <button type="submit">submit</button>
  </form>
  
</div>

edited Jul 1, 2015 at 12:45

Preview

35.9k10 gold badges95 silver badges113 bronze badges

answered Sep 23, 2014 at 18:42

meriadec

2,98321 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ssxdots Over a year ago

thanks! adding in the type="button" to all my buttons solve the problem!

Ben Rondeau Over a year ago

Could be surmised as just adding the attribute type="button" on the <button> element. Thanks for the fix!

Collectives™ on Stack Overflow

AngularJS - how to use ng-click without submitting the form?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related