AngularJS: Prevent form submission or stop page refresh on submit

I have recently started learning AngularJS and came across form that would refresh every time I click the submit button. So, here are a couple of ways to prevent that from happening.

HTML Form

<div ng-app="my-app"> <div ng-controller="myFormController"> <form action="test_submit.php" method="post" accept-charset="utf-8" name="myTestForm" ng-submit="myTestForm.$valid && submit()" novalidate> <div> <label for="fname">First Name</label> <input type="text" ng-model="dataForm.fname" name="fname" id="fname" required> </div> <div> <label for="lname">Last Name</label> <input type="text" ng-model="dataForm.lname" name="lname" id="lname" required> </div> <div> <label for="email">Email</label> <input type="text" ng-model="dataForm.email" name="email" id="email" required> </div> <div> <button name="submit" ng-disabled="myTestForm.$invalid" type="submit">Submit</button> </div> </form> </div> </div>

Angular JS

var myApp = angular.module('my-app', []); myApp.controller('myFormController', function($scope, $http) { $scope.dataForm = {}; $scope.submit = function() { // Ajax }; }); 

Method 1 :: Prevent event from happening using JS.
Using $event.preventDefault(); prevents any and all default working while keeping the HTML as it is.

var myApp = angular.module('my-app', []); myApp.controller('myFormController', function($scope, $http) { $event.preventDefault(); // will stop page reload $scope.dataForm = {}; $scope.submit = function() { // Ajax }; });

Method 2 :: Prevent event from happening, by not creating the event in the first place.
Instead of using type="submit"in the input or button tag, use type="button" and ng-click="submit()"to call the function.

Note: a button tag without type attribute by default works as a submit button.
Note: appropriate changes will be needed in JS as well.

<div ng-app="my-app"> <div ng-controller="myFormController"> <form action="test_submit.php" method="post" accept-charset="utf-8" name="myTestForm" ng-submit="myTestForm.$valid && submit()" novalidate> <div> <label for="fname">First Name</label> <input type="text" ng-model="dataForm.fname" name="fname" id="fname" required> </div> <div> <label for="lname">Last Name</label> <input type="text" ng-model="dataForm.lname" name="lname" id="lname" required> </div> <div> <label for="email">Email</label> <input type="text" ng-model="dataForm.email" name="email" id="email" required> </div> <div> <button name="submit" ng-disabled="myTestForm.$invalid" type="button" ng-click="submit()"">Submit</button> </div> </form> </div> </div>

Method 3:: Remove action attribute from form tag. Yes!
Removing action attribute in form tag prevents page refresh by default without having to change any other code. Note: an empty action=""tag is not going to work.

<div ng-app="my-app"> <div ng-controller="myFormController"> <form method="post" accept-charset="utf-8" name="myTestForm" ng-submit="myTestForm.$valid && submit()" novalidate> <div> <label for="fname">First Name</label> <input type="text" ng-model="dataForm.fname" name="fname" id="fname" required> </div> <div> <label for="lname">Last Name</label> <input type="text" ng-model="dataForm.lname" name="lname" id="lname" required> </div> <div> <label for="email">Email</label> <input type="text" ng-model="dataForm.email" name="email" id="email" required> </div> <div> <button name="submit" ng-disabled="myTestForm.$invalid" type="submit">Submit</button> </div> </form> </div> </div>

Enjoy!!!

Follow me
Latest posts by Abhishek Gupta (see all)

Leave a Reply