submitting a Form using

praneethkumarpidugu · Jun 19, 2016 · 8c02bb2 · 8c02bb2
1 parent 73465e6
commit 8c02bb2
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 5 deletions.
diff --git a/lesson3/index.html b/lesson3/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html >
-<html lang="en" ng-app>
+<html lang="en" ng-app="minmax">
 <head >
 	<title >Form Submission</title >
 	<link href="../libs/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" >
@@ -17,42 +17,47 @@
 	</div >
 </nav >
 
-<div class="container main-content" >
+<div class="container main-content" ng-controller="MinMaxCtrl">
 
 	<form >
 		<div class="form-group" >
 			<label for="name" >Name</label >
 			<input type="text"
 			       class="form-control"
+				   ng-model="formModel.name"
 			       id="name" >
 		</div >
 
 		<div class="form-group" >
 			<label for="email" >Email</label >
 			<input type="email"
 			       class="form-control"
+				   ng-model="formModel.email"
 			       id="email" >
 		</div >
 
 		<div class="form-group" >
 			<label for="username" >Username</label >
 			<input type="text"
 			       class="form-control"
+				   ng-model="formModel.username"
 			       id="username" >
 		</div >
 
 		<div class="form-group" >
 			<label for="age" >Age</label >
 			<input type="number"
 			       class="form-control"
+				   ng-model="formModel.age"
 			       id="age" >
 		</div >
 
 		<div class="form-group" >
 			<label for="sex" >Sex</label >
 			<select name="sex"
 			        id="sex"
-							class="form-control" >
+					class="form-control"
+					ng-model="formModel.sex" >
 				<option value="" >Please Choose</option >
 				<option value="male" >Male</option >
 				<option value="female" >Female</option >
@@ -63,15 +68,17 @@
 			<label for="password" >Password</label >
 			<input type="password"
 			       class="form-control"
+				   ng-model="formModel.password"
 			       id="password" >
 		</div >
 
 		<div class="form-group">
-			<button class="btn btn-primary" >Register
+			<button class="btn btn-primary" ng-click="onSubmit()">Register
 			</button>
 		</div>
 
 	</form >
+	<pre>{{ formModel | json }}</pre>
 
 
 </div >

diff --git a/lesson3/main.js b/lesson3/main.js
@@ -1,3 +1,21 @@
 var app = angular.module('minmax', []);
 
-// https://minmax-server.herokuapp.com/register/'
+// https://minmax-server.herokuapp.com/register/'
+//To Actually send a HTTPrequest we need to inject the httpService into the
+//controller.
+app.controller('MinMaxCtrl', function ($scope, $http) {
+   $scope.formModel = {};
+    $scope.onSubmit = function () {
+      console.log("I'm submitted");
+        console.log($scope.formModel);
+        //$http.post(param1, param2)
+        //param1 is the endpoint we want to send
+        //param2 is the data which we want to send.
+        $http.post('https://minmax-server.herokuapp.com/register/', $scope.formModel).
+            success(function (data) {
+                console.log(":)")
+            }).error(function (data) {
+                console.log(":(")
+            });
+    };
+});