Guys,
Today we are going to learning Angularjs, just try out What I found, an easier and simple way to write simple form submit in angularjs with php.
We can make a HTML form to submit and save to database,
Here we are going to include 2 js files; one is Angularjs library and another one formjs.js which we will be using in writing controller of our form.
Let us dig deep into the form
- We will be adding ng-app=”formExample” after the html tag -ng-app tells the angular, this block needs to be watched by the angular module.
- After that we need to add the controller to form tag like ng-controller=”formCtrl”
– we are going to define formCtrl in formjs.js to tell what are the action need to do with that form - Lastly we will add ng-click=”formsubmit(userForm.$valid)”
On clicking the button, it will go to formsubmit function and we will pass the validation rules as parameters. We will use native $valid function to validate the form.
Sample HTML page – index.html page
<!DOCTYPE html>
<html ng-app="formExample">
<head>
<title>simple form with AngualrJS</title>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />
<script src="js/angular.js" ></script>
<script src="js/formjs.js"></script>
</head>
<body>
<div ng-controller="formCtrl">
<form name="userForm" class="well form-search" >
<input type="text" ng-model="name" class="input-medium search-query" placeholder="Name" required >
<input type="email" ng-model="email" class="input-medium search-query" placeholder="Email" required >
<input type="text" ng-model="message" class="input-medium search-query" placeholder="Message" required >
<button type="submit" class="btn" ng-click="formsubmit(userForm.$valid)" ng-disabled="userForm.$invalid">Submit </button>
</form>
<pre ng-model="result">
{{result}}
</pre>
</div>
</body>
</html>
Now we will have a look on the javascript (formjs.js) file
- First we are going to define the module as “formExample”.(We have already included in html as mentioned above).
- Next to that we will define our controller with two dependency, ‘$scope’ and ‘$http’. $scope is for current scope and $http for ajax submission.
- Later we will define formsubmit function and we will pass the validation status as parameter.
- Now we will fetch all the values from the form and validate, on successful validation it is send to submit.php as json data. If form validation fails, it will show an alert message.
javascript file
formjs.js
<pre class="lang:default decode:true " title="formjs.js" >
/**
* @filesource : formjs.js
* @author : Shabeeb <mail@shabeebk.com>
* @abstract : controller fo HTML page
* @package sample file
* @copyright (c) 2014, Shabeeb
* shabeebk.com/blog
*
* */
var app = angular.module('formExample', []);
app.controller("formCtrl", ['$scope', '$http', function($scope, $http) {
$scope.url = 'submit.php';
$scope.formsubmit = function(isValid) {
if (isValid) {
$http.post($scope.url, {"name": $scope.name, "email": $scope.email, "message": $scope.message}).
success(function(data, status) {
console.log(data);
$scope.status = status;
$scope.data = data;
$scope.result = data;
})
}else{
alert('Form is not valid');
}
}
}]);</pre>
In submit.php page we are going to retrieve the json data and decode using it json_decode.
For that we can use the below code:
$post_date = file_get_contents(“php://input”);
$data = json_decode($post_date);
Below is the query to save data to database .
Here I am just printing all the values which we will get from the form for illustration.
php submission form
submit.php
<?php
/**
* @filesource : submit.php
* @author : Shabeeb <mail@shabeeb.com>
* @abstract : simple submission php form
* @package sample file
* @copyright (c) 2014, Shabeeb
*
*
* */
$post_date = file_get_contents("php://input");
$data = json_decode($post_date);
//saving to database
//save query
//now i am just printing the values
echo "Name : ".$data->name."n";
echo "Email : ".$data->email."n";
echo "Message : ".$data->message."n";
?>
Enjoy your Coding with Coffee 😉
19,607 total views, 1 views today