Tag: angular-JS

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”