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!

Citric

Possible duplicate: #12320258 – Girondist

Answer 1

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>

Cecilececiley

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

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