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 }; }); 

Continue reading “AngularJS: Prevent form submission or stop page refresh on submit”