In this post, we are going to learn How to submit form data to PHP script by using AngularJS. In modern web development, many of technology used to submit a form data to the server script. Nowadays AngularJS is one of the technique use front-end technology it will manage by Google Inc on their hosted library. Here we will handle form data submission by using AngularJS and we will make necessary field validation by using AngularJS form valid or PHP Script. Here AngularJS directives, event are used to this operation we will perform simple AngularJS application in which we will make simple for Insert or Create form data into Mysql database.
Here we are going to submit post details form data to PHP Script to save into MySQL database with validation.For doing this operation, we want to create a blank object for bind form data and after this that object name we have to define into different input tag ng-model directive using AngularJS. After object creation, we need to define ng-model directive it helps us to bind the data to an object. When the post submits button click the form data has been bind into that form object and parse into PHP script and it can process form field by an object. In AngularJS, ng-show directive help us to display the request response messages into HTML page with proper scope variables. In AngularJS directives are help us to pass or show the details with HTML elements when it will have value in it other wise it will be hidden state.
Step 1: Database and Connect Details
Here we going to get contention with MySQL database using PHP with MySQLi contention property. Using this contention object we can process the CRUD process with REST API.
|
1 2 3 4 5 6 7 |
CREATE TABLE `li_ajax_post_load` ( `post_id` int(11) NOT NULL, `post_title` varchar(250) NOT NULL, `post_desc` text NOT NULL, `status` int(11) NOT NULL, PRIMARY KEY (`post_id`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1; |
and connection object,
|
1 2 3 4 5 6 7 8 9 10 |
<?php //db details $db_host = 'localhost'; $db_user = 'root'; $db_pass = ''; $db_name = 'li_demo'; //connect and select db $con = mysqli_connect($db_host, $db_user, $db_pass, $db_name); ?> |
Step 2: Define and Set a HTML Form with AngularJS Directive
Here we need to declare HTML form with Angular Directives with ng-app, ng-controller, ng-model and ng-disabled for declaring Angular App handling area.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<div ng-app="li-app" ng-controller="PostFormController"> <div class="alert icon-alert with-arrow alert-success" role="alert" ng-show="success"> <i class="fa fa-fw fa-check-circle"></i> <strong> Success ! </strong> Data saved successfully. </div> <div class="alert icon-alert with-arrow alert-danger" role="alert" ng-show="error"> <i class="fa fa-fw fa-times-circle"></i> <strong> Note !</strong> Data saving failed. </div> <form name="post_details" ng-submit="postNow()"> <div class="form-group"> <label class="required">Post Title </label> <input type="text" name="post_title" ng-model="postDetails.post_title" class="form-control" required /> <span class="text-danger" ng-show="errorTitle">{{errorTitle}}</span> </div> <div class="form-group"> <label class="required">Post Description </label> <textarea name="post_description" ng-model="postDetails.post_description" class="form-control" rows="8" required></textarea> <span class="text-danger" ng-show="errorDescription">{{errorDescription}}</span> </div> <br /> <div class="form-group"> <input type="submit" name="post" class="btn btn-primary" ng-disabled="post_details.$invalid" value="Post Now"/> </div> </form> </div> |
Step 3: Define and initiate AngularJS App
In this area, we are going to declare and initiate Angular app with controller and scope objects with postNow() function.
|
1 |
var app = angular.module("li-app", []); |
and define a controller with $.post() method to submit form data to PHP script
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
app.controller("PostFormController", function($scope, $http){ $scope.postDetails = {}; $scope.postNow = function(){ $http({ method:"POST", url:"insertPost.php", data:$scope.postDetails, }).success(function(data){ if(!(data.status)) { $scope.errorTitle = data.error.post_title; $scope.errorDescription = data.error.post_description; $scope.success = false; $scope.error = true; } else { $scope.postDetails = null; $scope.errorTitle = null; $scope.errorDescription = null; $scope.success = true; $scope.error = false; } }); } }); |
Step 4: Define PHP script to handle form data
PHP script contains submitted form data handling with validation and store into MySQL database table and response as JSON array data.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<?php require_once('./include/mysqli_connect.php'); $form_data = json_decode(file_get_contents("php://input")); $data = array(); $error = array(); $post_title = mysqli_real_escape_string($con, $form_data->post_title); $post_description = mysqli_real_escape_string($con, $form_data->post_description); if(!isset($post_title) || empty($post_title)) { $error["post_title"] = "Post Title is required"; } if(!isset($post_description) || empty($post_description)) { $error["post_description"] = "Post Description required"; } if(!empty($error)) { $data["status"] = false; $data["error"] = $error; } else { $query = "INSERT INTO li_ajax_post_load(post_title, post_desc) VALUES ('$post_title', '$post_description') "; if(mysqli_query($con, $query)) { $data["status"] = true; $data["message"] = "New post added successfully."; } } echo json_encode($data); ?> |
