Using
the ng-submit directive we can make
Ajax calls to the methods in the controller when the form is submitted. The
conventional form tag and action method will post the page data and re-direct
to a new page, the ng-form directive
instead allows us to call a JavaScript method in the controller and pass
objects to the controller method.
The following example shows a simple implementation of the form submit, in this example we just display a message from the submit function, in real time we can do complex implementations like making Ajax calls to the Server.
<html ng-app>
<head>
<meta charset="utf-8">
<title>AngularJS - Basic</title>
<script src="angular.min.js"></script>
<script>
function nameController($scope){
$scope.person = {
firstName: "John",
lastName: "David",
};
$scope.SaveForm = function(person) {
alert('Form Submitted, Full Name: ' + person.firstName + ', ' + person.lastName);
}
}
</script>
</head>
<body>
<div ng-controller="nameController">
<form name="nameForm" ng-submit="SaveForm(person)" novalidate>
First Name: <input type="text" ng-model="person.firstName"><br/><br/>
Last Name: <input type="text" ng-model="person.lastName"><br/><br/>
<button type="submit">Submit</button>
</form>
</div>
</body>
</html>
The following example shows a simple implementation of the form submit, in this example we just display a message from the submit function, in real time we can do complex implementations like making Ajax calls to the Server.
<html ng-app>
<head>
<meta charset="utf-8">
<title>AngularJS - Basic</title>
<script src="angular.min.js"></script>
<script>
function nameController($scope){
$scope.person = {
firstName: "John",
lastName: "David",
};
$scope.SaveForm = function(person) {
alert('Form Submitted, Full Name: ' + person.firstName + ', ' + person.lastName);
}
}
</script>
</head>
<body>
<div ng-controller="nameController">
<form name="nameForm" ng-submit="SaveForm(person)" novalidate>
First Name: <input type="text" ng-model="person.firstName"><br/><br/>
Last Name: <input type="text" ng-model="person.lastName"><br/><br/>
<button type="submit">Submit</button>
</form>
</div>
</body>
</html>
Output
No comments:
Post a Comment