In this post we are going to learn How to submit form data by using AngularJS with some validation by using PHP Script. We all know how to submit form by using Ajax in JQuery. But now we will do this things by using AngularJS. In current web development there number of technology we can use to submit form. So we want know to submit by atleast some major technology which are widely used. So AngularJS is one of the highly use font end technology after JQuery. This is also manage by Google inc on their hosted library.
We have already published some of post later in which we have already make discussion on Insert Update Delete crud operation by AngularJS, How to upload file by using AngularJS and many more. But know we have learn some advance topic AngularJS. Here we will handle form data by using AngularJS and we will make required field validation by using PHP Script. We all know basic uses of AngularJS directives, event. By using this basic concept we will make simple AngularJS application in which we will make simple for Insert user data into Mysql table.
We all know while we have submit simple text form data by Jquery then at that time we have used simple serialize() method and by using this method we have convert form data into url encoded string. But in AngularJS we want to create blank object for bind form data and after this that object name we have to define into different input tag ng-model directive. So after defining object into ng-model directive then after form data has been bind into object. So when form has been submitted then form data has been bind into this form object and in PHP script we can access form field by using Object.
For display validation error message, we have use ng-show directive of AngularJS into HTML tag. The main functionality of this directive is when it has some value then that HTML element will be visible on web page otherwise it will be hidden. So this way we have use different features of AngularJS for submit form data to server with validation.
Source Code
index.php
<!DOCTYPE html>
<html>
<head>
<title>Webslesson Tutorial | Submit Form Data by using AngularJS with Validation using PHP</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<br /><br />
<div class="container" style="width:750px;">
<h3 align="center">Submit Form Data by using AngularJS with Validation using PHP</h3>
<br /><br />
<div ng-app="myapp" ng-controller="formcontroller">
<form name="userForm" ng-submit="insertData()">
<label class="text-success" ng-show="successInsert">{{successInsert}}</label>
<div class="form-group">
<label>First Name <span class="text-danger">*</span></label>
<input type="text" name="first_name" ng-model="insert.first_name" class="form-control" />
<span class="text-danger" ng-show="errorFirstname">{{errorFirstname}}</span>
</div>
<div class="form-group">
<label>Last Name <span class="text-danger">*</span></label>
<input type="text" name="last_name" ng-model="insert.last_name" class="form-control" />
<span class="text-danger" ng-show="errorLastname">{{errorLastname}}</span>
</div>
<br />
<div class="form-group">
<input type="submit" name="insert" class="btn btn-info" value="Insert"/>
</div>
</form>
</div>
</div>
</body>
</html>
<script>
var application = angular.module("myapp", []);
application.controller("formcontroller", function($scope, $http){
$scope.insert = {};
$scope.insertData = function(){
$http({
method:"POST",
url:"insert.php",
data:$scope.insert,
}).success(function(data){
if(data.error)
{
$scope.errorFirstname = data.error.first_name;
$scope.errorLastname = data.error.last_name;
$scope.successInsert = null;
}
else
{
$scope.insert = null;
$scope.errorFirstname = null;
$scope.errorLastname = null;
$scope.successInsert = data.message;
}
});
}
});
</script>
insert.php
<?php
//insert.php
$connect = mysqli_connect("localhost", "root", "", "testing");
$form_data = json_decode(file_get_contents("php://input"));
$data = array();
$error = array();
if(empty($form_data->first_name))
{
$error["first_name"] = "First Name is required";
}
if(empty($form_data->last_name))
{
$error["last_name"] = "Last Name is required";
}
if(!empty($error))
{
$data["error"] = $error;
}
else
{
$first_name = mysqli_real_escape_string($connect, $form_data->first_name);
$last_name = mysqli_real_escape_string($connect, $form_data->last_name);
$query = "
INSERT INTO tbl_user(first_name, last_name) VALUES ('$first_name', '$last_name')
";
if(mysqli_query($connect, $query))
{
$data["message"] = "Data Inserted...";
}
}
echo json_encode($data);
?>
--
-- Database: `testing`
--
-- --------------------------------------------------------
--
-- Table structure for table `tbl_user`
--
CREATE TABLE IF NOT EXISTS `tbl_user` (
`id` int(11) NOT NULL,
`first_name` varchar(250) NOT NULL,
`last_name` varchar(250) NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=latin1;
--
-- Dumping data for table `tbl_user`
--
INSERT INTO `tbl_user` (`id`, `first_name`, `last_name`) VALUES
(1, 'Peter', 'Parker'),
(2, 'John', 'Smith'),
(3, 'Kevin', 'Peterson');
--
-- Indexes for dumped tables
--
--
-- Indexes for table `tbl_user`
--
ALTER TABLE `tbl_user`
ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `tbl_user`
--
ALTER TABLE `tbl_user`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=4;
amazing !!!!!!! <3
ReplyDeleteThank you it works for me :)
ReplyDeletei am add file field but not working please give me solution
ReplyDeleteIt is not working how to do this help?
ReplyDeleteHello, because the mysqli_real_escape_string () function fails on my serve 000webhost.com
ReplyDelete