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!!!
- PHP syntactic sugar code example - September 5, 2021
- Python convert random string date format to Datetime - July 12, 2021
- Laravel Custom Exception Handlers - March 28, 2019