X
    Categories: Angularjs

How to submit form using angularjs in php?

How to submit form using angularjs in php?

Hi in this tutorial I am goin to explain how to submit the from using angular js. Maximum of the developers are using jquery and ajax. But now a new library comes out with named angularjs. In angularjs $http service provided to communicate remote http servers. There are many ways to post form data using angularjs, but i am sharing a simple way. We’ll use a simple form that used to be submitted using PHP and how to convert that to Angular.

1. The Form – Setting up angularjs application/model/controller :-

Let’s create html to show up form and initialize angularjs app.

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> 
    <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script> 
</head>
<body ng-app="postApp" ng-controller="postController">
<div class="container">
<div class="col-sm-8 col-sm-offset-2">
    <div class="page-header"><h1>Post data using angularJS</h1></div>
    <!-- FORM -->
    <form name="userForm" ng-submit="submitForm()">
    <div class="form-group">
        <label>Name</label>
        <input type="text" name="name" class="form-control" ng-model="user.name">
        <span ng-show="errorName">{{errorName}}</span>
    </div>
    <div class="form-group">
        <label>Username</label>
        <input type="text" name="username" class="form-control" ng-model="user.username">
        <span ng-show="errorUserName">{{errorUserName}}</span>
    </div>
    <div class="form-group">
        <label>Email</label>
        <input type="email" name="email" class="form-control" ng-model="user.email">
        <span ng-show="errorEmail">{{errorEmail}}</span>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
    </form>
</div>
</div>
</body>
</html>

Understanding the form :- We including angualrjs script library to work with angularjs like jquery.

<body ng-app="postApp" ng-controller="postController">

ng-app=”postApp” – Directive that define angularjs application
ng-controller=”postController” – Directives that define angularjs controller

<form name="userForm" ng-submit="submitForm()">

ng-submit=”submitForm()” – We are calling a function on form submit

<span ng-show="errorName">{{errorName}}</span>
<span ng-show="errorUserName">{{errorUserName}}</span>
<span ng-show="errorEmail">{{errorEmail}}</span>

ng-show=”errorName” – This will control to show errors. we will showing up errors in this span tag using ng-show directives.

2. Use angular object to get form data :-

We are using ng-model directive to define angular object we are using user object to process with form like user.name, user.username


3. Post form data using angularjs :-

Let’s make angularjs script to post form data using angularjs. Add this script to your form to process. Here we are using POST method Submit Form with angularjs to php.

<script>
    // Defining angularjs application.
    var postApp = angular.module('postApp', []);
    // Controller function and passing $http service and $scope var.
    postApp.controller('postController', function($scope, $http) {
      // create a blank object to handle form data.
        $scope.user = {};
      // calling our submit function.
        $scope.submitForm = function() {
        // Posting data to php file
        $http({
          method  : 'POST',
          url     : 'clone.php',
          data    : $scope.user, //forms user object
          headers : {'Content-Type': 'application/x-www-form-urlencoded'} 
         })
          .success(function(data) {
            if (data.errors) {
              // Showing errors.
              $scope.errorName = data.errors.name;
              $scope.errorUserName = data.errors.username;
              $scope.errorEmail = data.errors.email;
            } else {
              $scope.message = data.message;
            }
          });
        };
    });
</script>

Understanding the script :-

$scope: is a object of application model For more follow Docs.
$http: The Angular service that will help to communicate remote http servers . For more information, check out the Docs.

4. Process/handle form data and errors in php :-

Now create a clone.php and add below code to show response or errors back to angularjs application.

<?php
$errors = array();
$data = array();
// Getting posted data and decodeing json
$_POST = json_decode(file_get_contents('php://input'), true);

// checking for blank values.
if (empty($_POST['name']))
$errors['name'] = 'Name is required.';

if (empty($_POST['username']))
$errors['username'] = 'Username is required.';

if (empty($_POST['email']))
$errors['email'] = 'Email is required.';

if (!empty($errors)) {
$data['errors'] = $errors;
} else {
$data['message'] = 'Form data is going well';
}
// response back.
echo json_encode($data);
?>

 5. Show form success/errors using angularjs :-

We are using ng-show directive to show errors in our form. which we are sending back if form has any errors.

<span ng-show="errorName">{{errorName}}</span>
<span ng-show="errorUserName">{{errorUserName}}</span>
<span ng-show="errorEmail">{{errorEmail}}</span>

So now you can easily post form data using angularjs, you can also use $.param() method to convert user object in string and can get directly your post values. But we are working with angularjs so i am not including jquery here. So Now you can easily submit your form with angularjs.

If you like this article don’t forget to share and comment.

Thanks!.

Happy Coding.

 

Marimuthu: