angularjs with php – Simple form submission


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.

angularjs_PHP_form_submission

angular js with php form submission

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";



?>

Download files

Demo

Enjoy your Coding with Coffee 😉

81,890 total views, 264 views today

28 Comments

  1. thanks dude..you explain it well..

  2. It works perfect, thanks for the fast intro to angularjs bro now this sounds much easier to me.

  3. True Religion Hats

    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.

  4. JessikaSHoultberg

    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.

  5. DarronBPineault

    July 6, 2015 at 11:18 pm

    What’s up, just wanted to say, I loved this post. It was helpful.
    Keep on posting!

  6. AugustinaUDuncklee

    July 9, 2015 at 2:30 pm

    Thanks for sharing your thoughts about angularjs with php.
    Regards

  7. cartier love bracelet replacement screw replica

    July 22, 2015 at 9:15 pm

    Really enjoyed this article. Awesome.

  8. 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]

  9. the cartier love bracelet replica

    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.

  10. Thanks in support of sharing such a nice idea, article is good, thats why i have read it fully

  11. google adwords coupon

    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.

  12. 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.

  13. Excellent article. I will be going through some
    of these issues as well..

  14. There’s noticeably a bundle to know about this. I assume you made certain good points in options also.

  15. This is one awesome article post.Much thanks again. Great.

  16. limewire free music downloads

    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.

  17. yesss very thanks man i love this site

  18. Great post.

  19. 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.

  20. This actually answered my downside, thanks right here on this post. I will likely be coming again to your weblog for extra soon.

  21. super bro.. thanks

  22. 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.

    • 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);

  23. I value the blog post.Really looking forward to read more. Much obliged.

1 Pingback

  1. Pingback: Homepage

Leave a Reply

Your email address will not be published.

*

© 2017 shabeeb Blog

Theme by Anders NorénUp ↑