Clicking a button within a form causes page refresh

Clicking a button within a form causes page refresh

I have a form in Angular that has two buttons tags in it. One button submits the form on ng-click. The other button is purely for navigation using ng-click. However, when this second button is clicked, AngularJS is causing a page refresh which triggers a 404. I’ve dropped a breakpoint in the function and it is triggering my function. If I do any of the following, it stops:

If I remove the ng-click, the button doesn’t cause a page refresh.
If I comment out the code in the function, it doesn’t cause a page refresh.
If I change the button tag to an anchor tag () with href=””, then it doesn’t cause a refresh.

The latter seems like the simplest workaround, but why is AngularJS even running any code after my function that causes the page to reload? Seems like a bug.
Here is the form:

Here is the controller method:
$scope.showChangePassword = function() {
$scope.selectedLink = “changePassword”;
};

Related:  Internet Explorer and JavaScript event currentTarget

Solutions/Answers:

Solution 1:

If you have a look at the W3C specification, it would seem like the obvious thing to try is to mark your button elements with type='button' when you don’t want them to submit.

The thing to note in particular is where it says

A button element with no type attribute specified represents the same thing as a button element with its type attribute set to “submit”

Solution 2:

You can try to prevent default handler:

html:

<button ng-click="saveUser($event)">

js:

$scope.saveUser = function (event) {
  event.preventDefault();
  // your code
}

Solution 3:

You should declare the attribute ng-submit={expression} in your <form> tag.

From the ngSubmit docs
http://docs.angularjs.org/api/ng.directive:ngSubmit

Enables binding angular expressions to onsubmit events.

Additionally it prevents the default action (which for form means sending the request to the server and reloading the current page).

Solution 4:

I use directive to prevent default behaviour:

module.directive('preventDefault', function() {
    return function(scope, element, attrs) {
        angular.element(element).bind('click', function(event) {
            event.preventDefault();
            event.stopPropagation();
        });
    }
});

And then, in html:

<button class="secondaryButton" prevent-default>Secondary action</button>

This directive can also be used with <a> and all other tags

Solution 5:

You can keep <button type="submit">, but must remove the attribute action="" of <form>.

Solution 6:

I wonder why nobody proposed the possibly simplest solution:

don’t use a <form>

A <whatever ng-form> does IMHO a better job and without an HTML form, there’s nothing to be submitted by the browser itself. Which is exactly the right behavior when using angular.