AngularJS Form Submit with PHP

Today we are going to learn AngularJS Form Submit with PHP. Form submission is important in every web application so now in modern web development, we must use AngularJS for submitting the form. We can use AngularJS with PHP, The Official Microsoft ASP.NET Site and other server-side languages but we will use PHP in our tutorial for submitting the form with AngularJS.

There are some steps for this tutorial you will follow.

Step-1) HTML Form

Below is the HTML form we made for our Form submission with AngularJS tutorial. (index.html)

<!DOCTYPE html>
<html ng-app=”submitForm”>
<head>
<title>AngularJS Form Submit with PHP</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>
<a href=”AngularJS Form Submit with PHP — PHPCodify”>Go back to Tutorial</a>
</body>
</html>
  • Here We are using two AngularJS files named “angular.js” it is a library of AngularJS and “formjs.js” in this file we will write our angularjs code for our form controller to submit the form and send all values to PHP Script.
  • We added ng-app=”submitForm” after the HTML tag “ng-app” tells the angular, this block code needs to be checked by the angular module.
  • After that, we added the controller to form tag like ng-controller=”formCtrl”. we defined formCtrl in formjs.js to tell what are the actions need to do with that form.
  • In the last we added 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.

Step-2) AngularJS Code

Below is the angularjs code copy it and paste in your formjs.js file.

var app = angular.module(‘submitForm’, []);
app.controller(“formCtrl”, [‘$scope’, ‘$http’, function($scope, $http) {
$scope.url = ‘submit.php’;
$scope.formsubmit = function(isValid) {
if (isValid) {
$http.post($scope.url, {“name”: $http://scope.name, “email”: $scope.email, “message”: $scope.message}).
success(function(data, status) {
console.log(data);
$scope.status = status;
$scope.data = data;
$scope.result = data; // Show result from server in our <pre></pre> element
})
}else{
alert(‘Form is not valid’);
}
}
}]);
  • First we declared the module as “submitForm”.(I have already included in html as mentioned above in the Step-1).
  • In the next step I defined controller with two dependency, ‘$scope’ and
  • ‘$http’. $scope is for current scope and $http for ajax submission.
  • The last point I made formsubmit function and we will pass the validation status as a parameter.
  • Now we will fetch all the values from the form and validate, on successful validation, it is sent to submit.php as JSON data. If form validation fails, it will show an alert message.

Step-3) PHP Code for Showing the Form Values

Below is the PHP code copy it and paste in your submit.php file.

<?php
$post_date = file_get_contents(“http://php://input");
$data = json_decode($post_date);
//Here you can write your SQL queries to save the data into databases.
//I will just show form values here using echo which we submit using AngularJS
echo “Name : “.$data->name.”\n”;
echo “Email : “.$data->email.”\n”;
echo “Message : “.$data->message.”\n”;
?>
  • Now We made our HTML form and AngularJS code so now we will write our PHP code of form submission using angularjs with php .In submit.php file we are going to retrieve the JSON data and decode using it json_decode.For that, we can use the below methods
$post_date = file_get_contents(“http://php://input”);
$data = json_decode($post_date);

In this PHP Script, I olny display the form values which was submitted using angularjs. Now we have the values so we can save these values in the Database you can use MySQL for this.