Guys,
Today we are going to learning Angularjs with php, just try out What I found, an easier and simple way to write simple form submit in angularjs with php.
We can make a HTML form to submit and save to database,
Here we are going to include 2 js files; one is Angularjs library and another one formjs.js which we will be using in writing controller of our form.
Let us dig deep into the form
- We will be adding ng-app=”formExample” after the html tag -ng-app tells the angular, this block needs to be watched by the angular module.
- After that we need to add the controller to form tag like ng-controller=”formCtrl”
– we are going to define formCtrl in formjs.js to tell what are the action need to do with that form - Lastly we will add 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.
Sample HTML page – index.html page
<!DOCTYPE html>
<html ng-app="formExample">
<head>
<title>simple form with AngualrJS</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>
</body>
</html>
Now we will have a look on the javascript (formjs.js) file
- First we are going to define the module as “formExample”.(We have already included in html as mentioned above).
- Next to that we will define our controller with two dependency, ‘$scope’ and ‘$http’. $scope is for current scope and $http for ajax submission.
- Later we will define formsubmit function and we will pass the validation status as parameter.
- Now we will fetch all the values from the form and validate, on successful validation it is send to submit.php as json data. If form validation fails, it will show an alert message.
javascript file
formjs.js
<pre class="lang:default decode:true " title="formjs.js" >
/**
* @filesource : formjs.js
* @author : Shabeeb <mail@shabeebk.com>
* @abstract : controller fo HTML page
* @package sample file
* @copyright (c) 2014, Shabeeb
* shabeebk.com/blog
*
* */
var app = angular.module('formExample', []);
app.controller("formCtrl", ['$scope', '$http', function($scope, $http) {
$scope.url = 'submit.php';
$scope.formsubmit = function(isValid) {
if (isValid) {
$http.post($scope.url, {"name": $scope.name, "email": $scope.email, "message": $scope.message}).
success(function(data, status) {
console.log(data);
$scope.status = status;
$scope.data = data;
$scope.result = data;
})
}else{
alert('Form is not valid');
}
}
}]);</pre>
Now we are going to look on PHP part of angularjs with php .In submit.php page we are going to retrieve the json data and decode using it json_decode.
For that we can use the below code:
$post_date = file_get_contents(“php://input”);
$data = json_decode($post_date);
Below is the query to save data to database .
Here I am just printing all the values which we will get from the form for illustration.
php submission form
submit.php
<?php
/**
* @filesource : submit.php
* @author : Shabeeb <mail@shabeeb.com>
* @abstract : simple submission php form
* @package sample file
* @copyright (c) 2014, Shabeeb
*
*
* */
$post_date = file_get_contents("php://input");
$data = json_decode($post_date);
//saving to database
//save query
//now i am just printing the values
echo "Name : ".$data->name."n";
echo "Email : ".$data->email."n";
echo "Message : ".$data->message."n";
?>
Enjoy your Coding with Coffee 😉
647,742 total views, 4 views today
October 22, 2014 at 6:14 am
thanks dude..you explain it well..
December 29, 2014 at 3:14 am
It works perfect, thanks for the fast intro to angularjs bro now this sounds much easier to me.
June 11, 2015 at 10:40 pm
I have been browsing online more than 3 hours nowadays, but I by no means discovered any interesting article like yours. It is lovely value sufficient for me. Personally, if all site owners and bloggers made good content as you did, the internet will probably be much more useful than ever before.
July 6, 2015 at 3:43 am
Hi colleagues, how is all, and what you would like to say about this
paragraph, in my view its really awesome in favor of me.
July 6, 2015 at 11:18 pm
What’s up, just wanted to say, I loved this post. It was helpful.
Keep on posting!
July 9, 2015 at 2:30 pm
Thanks for sharing your thoughts about angularjs with php.
Regards
July 22, 2015 at 9:15 pm
Really enjoyed this article. Awesome.
August 2, 2015 at 10:03 pm
Thanks for the marvelous posting! I really enjoyed reading it, you will be a great author.I will make certain to bookmark your blog and may come back later on. I want to encourage you to ultimately continue your great job, have a nice day!
[url=http://www.katespadeoutlets.in.net]kate spade[/url]
August 13, 2015 at 8:06 am
That was a great article! I never realised that I could use transactions so easily and will surely make use of them in the future, now that I know how easy it is. On the other hand there are still situations in practice that DB transactions alone are not enough.
August 18, 2015 at 2:14 am
Thanks in support of sharing such a nice idea, article is good, thats why i have read it fully
August 20, 2015 at 10:47 am
Simply want to say your article is as astounding.
The clearness in your post is simply excellent and i could assume you’re
an expert on this subject. Fine with your permission allow me
to grab your RSS feed to keep up to date with forthcoming post.
Thanks a million and please keep up the rewarding work.
August 29, 2015 at 6:35 am
Appreciating the hard work you put into your website and detailed information you offer.
It’s good to come across a blog every once in a while that isn’t the same outdated rehashed material.
Excellent read! I’ve saved your site and I’m including your RSS feeds to my Google account.
August 31, 2015 at 1:13 pm
Excellent article. I will be going through some
of these issues as well..
September 3, 2015 at 10:32 am
There’s noticeably a bundle to know about this. I assume you made certain good points in options also.
September 4, 2015 at 7:44 pm
This is one awesome article post.Much thanks again. Great.
September 12, 2015 at 3:33 am
Hello there, You’ve done an excellent job. I will definitely digg it and personally suggest to my friends.
I am confident they will be benefited from this site.
September 20, 2015 at 12:48 pm
yesss very thanks man i love this site
October 14, 2015 at 3:19 pm
Great post.
October 17, 2015 at 3:05 pm
Howdy! Do you use Twitter? I’d like to follow you if that would be okay. I’m definitely enjoying your blog and look forward to new posts.
November 9, 2015 at 6:48 pm
HI, I have twitter, But not using much , You can follow me in linked in faizshabeeb
November 5, 2015 at 4:38 pm
This actually answered my downside, thanks right here on this post. I will likely be coming again to your weblog for extra soon.
May 27, 2016 at 7:21 pm
wonderful post
November 8, 2016 at 11:48 am
nice one post
March 20, 2017 at 4:58 am
http://without-prescription-buyretin-a.net/ – without-prescription-buyretin-a.net.ankor doxycycline100mgbuy.com.ankor http://cialistadalafillowest-price.net/
June 5, 2017 at 9:57 am
super bro.. thanks
June 20, 2017 at 6:09 am
after clicking on submit button where the data will be stored. If we want to get the result i our gmail what should we have to do. Please help me.
And this example is really good one.
August 3, 2017 at 4:43 pm
I just commented the in submit.php page like below
//saving to database
//save query
You can write a query to save database or can send email using mail command.
for simple mail can use something like this,
mail(“example@gmail.com”,”subject”,$data);
July 20, 2017 at 10:04 am
I value the blog post.Really looking forward to read more. Much obliged.