Thursday, February 6, 2020

How To Submit Form Data Using AngularJS and PHP With Validation

      , , , , , ,      No comments   
How To Submit Form Data Using AngularJS and PHP With Validation

In this post, you will learn how to submit form data using AngularJS and validate using PHP script. We all know how to submit a form using Ajax in JQuery. But now we do it with AngularJS. In current web development there is a lot of technology with which we can submit the form. That is why we want to know how we can present at least some of the most important technologies that are widely used. This makes AngularJS one of the most commonly used source termination technologies, according to JQuery. This is also managed by Google Inc. in its hosted library.

We have already published several later publications, in which we have already discussed the operation Insert Delete Delete Crud from AngularJS, load files with AngularJS and much more. But do you know that we have learned an advanced AngularJS topic. Here we will process the form data with AngularJS and perform the required field validation with PHP Script. We all know the basic uses of the AngularJS directives, event. With this basic concept, we create a simple AngularJS application that makes it easy to insert user data into the mysql table.


We all know that even though we sent Jquery simple text form data, at that point we were using the simple serialize () method and using this method we converted the form data to an url-encoded string. In AngularJS, however, we want to create an empty object for connection form data. Then this object name must be defined in another input marking guideline for the ng model. After defining the object in the ng-model directive after the form data has been linked to the object. After submitting the form, the form data was linked to this form object, and in the PHP script we can access the form field via Object.

To display the validation error message, we used the AngularJS directive ng-show in the HTML tag. The main functionality of this directive is that the HTML element is visible on the website when it has a certain value. Otherwise it will be hidden. In this way, we have used various AngularJS functions to send form data to the server with validation.


Source Code


index.php



<!DOCTYPE html>
<html>
 <head>
  <title>MyitBuddies Tutorials | How To Submit Form Data Using AngularJS and PHP  With Validation  </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">How To Submit Form Data Using AngularJS and PHP  With Validation  </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;

0 comments:

Post a Comment

Please don't enter any spam link in the comment box.