Posted on by Abhishek Gupta

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

Abhishek Gupta
Follow me
Latest posts by Abhishek Gupta (see all)

Leave a Reply