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”

Validating an email via JavaScript

Nearly every programmer needs to validate email id somewhere sometime while development. Here I have got a simple regex that is very good at validating JavaScript.

Demo

Email


Continue reading “Validating an email via JavaScript”

Level 6: Linking javascript

Tired of prompts? Lets solve this one quickly and move to next mission. When you check the source code for his mission you will not find a function like the previous levels. It is because the we necessarily do not need to write the javascript codes in our main file. We can also write it in a separate js file and link it.

<SCRIPT SRC=”psswd.js” LANGUAGE=”JavaScript” type=”text/javascript”></script>

Continue reading “Level 6: Linking javascript”

Level 5: SAvE-as

After solving the previous levels with javascript prompt level 5 isn’t difficult to solve. Some of you might face problems in it because if you click cancel the page redirects itself, giving you no time to check out the source code. But if you are using firefox(no idea about other browsers) you can still check the source code by pressing ctrl+U while the page is loading. Just open the source code and you’ll get the answer.

var pass, i;
pass=prompt("Password: ","");
if (pass=="SAvE-as hELpS a lOt") {
window.location.href="save_as.htm";
i=4;
}else {alert("Try again");
window.location.href="abrae.htm";}

Continue reading “Level 5: SAvE-as”

Level 3: Same Prompt?

Level 3 is all similar to the previous levels. But this level requries some knowledge of HTML as well. When you complete level 2 and come to level 3 it again gives you the same prompt box. So, we can just follow our usual steps and open the source code for this level.

On the very beginning of the page you will find the javascript function pass: Continue reading “Level 3: Same Prompt?”