Angularjs and jquery not working in my regular simple form

Question

I am learning Angularjs and I created simple form. Actually i am PHP developer so i preferred to use php as a server side scripting language. I am unable to submit the data to server, i tried so many methods but those are very complex if i am trying in standard method Angularjs is not working please check my code, and give me best method to work with angularjs, jquery and php. help me!

angular.module("mainModule", [])
  .controller("mainController", function($scope, $http) {
    $scope.person = {};
    $scope.serverResponse = '';

    $scope.submitData = function() {
      var config = {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        }
      };

      $http.post("server.php", $scope.person, config)
        .success(function(data, status, headers, config) {
          $scope.serverResponse = data;
        })
        .error(function(data, status, headers, config) {
          $scope.serverResponse = "SUBMIT ERROR";
        });
    };
  });

<?php
 if (isset($_POST["person"]))
  {
    // AJAX form submission
    $person = json_decode($_GET["person"]);

    $result = json_encode(array(
      "receivedName" => $person->name,
      "receivedEmail" => $person->email));
  }  else
  {
    $result = "INVALID REQUEST DATA";
  }

  echo $result;

?>

<!DOCTYPE html>
<html>

<head>
</head>

<body ng-app="mainModule">
  <div ng-controller="mainController">
    <form name="personForm1" novalidate ng-submit="submitData()">
      <label for="name">First name:</label>
      <input id="name" type="text" name="name" ng-model="person.name" required />
      <br />
      {{person.name}}
      <br />
      <label for="email">email:</label>
      <input id="email" type="text" name="email" ng-model="person.email" data-parsley-type="email" required />
      <br />
      <br />
      <button type="submit">Submit</button>
    </form>
    <br />
    <div>
      {{$scope.serverResponse}}
    </div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <!--<script type="text/javascript" src="script/parsley.js"></script>
  <script src="script.js"></script>-->
</body>

</html>

You have a typo in your HTML code, check `{{person.name}}`. Also - be more specific about what's not working. Are you not getting an answer from the server? Is the data not sent? — simeg, Feb 08 '15 at 11:09
Actually i want submit the form to php page, and i need to use both jquery and angularjs. but angularjs is not working, even parsleyjs validations also not working. — learner, Feb 08 '15 at 13:16

idan · Answer 1 · 2015-02-09T06:44:51.133

It seems from your code that you misunderstood some concepts.

You're not using jQuery at all - you can remove it unless parsely (not familiar with this one...) requires it
All HTML tags besides the DOCTYPE should be inside the root html tag. It's recommended to add JS at the bottom of the body tag which will (conceptually) contribute to page load performance.
The order of JS you import is important and should be by dependencies (eg: AngularJS can uses jQuery only if it's included but in your case angular doesn't know about it since the jQuery is added after AngularJS which causes Angular to build its jq lite instead)
You added a submitData to your controller's scope but you never call it - your intention was probably to use it when the user submits the form so you need to remove action and method attributes from the form and add ng-submit: <form name="personForm1" method="post" novalidate ng-submit="submitData(person, 'thePropNameOnWhichYouWantToSaveTheReturnedData')">. Both arguments are redundant since you have them on the $scope.
The config argument sent with $http service is used for configurations, not data. Read here: Angular $http
the default behavior of the $http is sending JSON as the request's body. It seems that you expect a form on your PHP code. This can be changed in the config for example, or you can learn how to deserialize JSONs on PHP (sorry, I don't know PHP).
Add the property on which you want to save the data to the $scope so it could be rendered.

Fixed client code suggestion:

angular.module("mainModule", [])
  .controller("mainController", function($scope, $http) {
    $scope.person = {};
    $scope.serverResponse = '';

    $scope.submitData = function() {
      // Let's say that your server doesn't expect JSONs but expects an old fashion submit - you can use the `config` to alter the request
      var config = {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        }
      };

      $http.post("server.php", $scope.person, config) // You can remove the `config` if the server expect a JSON object
        .success(function(data, status, headers, config) {
          $scope.serverResponse = data;
        })
        .error(function(data, status, headers, config) {
          $scope.serverResponse = "SUBMIT ERROR";
        });
    };
  });

<!DOCTYPE html>
<html>

<head>
</head>

<body ng-app="mainModule">
  <div ng-controller="mainController">
    <form name="personForm1" novalidate ng-submit="submitData()">
      <label for="name">First name:</label>
      <input id="name" type="text" name="name" ng-model="person.name" required />
      <br />
      {{person.name}}
      <br />
      <label for="email">email:</label>
      <input id="email" type="text" name="email" ng-model="person.email" data-parsley-type="email" required />
      <br />
      <br />
      <button type="submit">Submit</button>
    </form>
    <br />
    <div>
      {{$scope.serverResponse}}
    </div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <!--<script type="text/javascript" src="script/parsley.js"></script>
  <script src="script.js"></script>-->
</body>

</html>

You should also read some more on AngularJS docs and maybe do their full tutorial. It's extremely helpful

According my form requirement i need to use parsley.js but it is not working when i included angularjs. — learner, Feb 08 '15 at 13:26
i given ajax submission but i didnt get any any serverResponse — learner, Feb 08 '15 at 14:04
As I said, I don't know PHP but now when I look at it again it seems that you actually expect a JSON so the config is actually an error :-) However it can demonstrate a use case for using the `config` argument. I'l fix it when I'll be next to a laptop. Regarding parsley, I'm not familiar with this library but if you fixed the ordering of the `script` tag I can't see why it shouldn't work, but it seems like a subject for a different question... — idan, Feb 08 '15 at 22:02
Regarding parsley, it seems to be a common issue to use it with AngularJS... If it's a framework that you've already worked with and feel comfortable with than you can find different solutions online. Like this one for example: [Parsley Validation with AngularJS](http://ryanalberts.com/797/parsley-validation-with-angularjs/) . There are also plenty of other form validators which can be easier to implement into AngularJS or are alreay written. e.g. [Angular UI validation](http://angular-ui.github.io/ui-utils/) — idan, Feb 09 '15 at 07:25

Pankaj Parkar · Answer 2 · 2015-02-08T12:06:52.000

You're using angular form and posting data from controller internally then you should not suppose to be mention action="server.php" method="post" because you are going to do this call from controller i.e. $http.post('server.php').

Just add ng-submit="submitData(person, 'result')" directive in your form tag, that will call your controller method which is posting data and your code will start working.

HTML

<form name="personForm1" novalidate ng-submit="submitData(person, 'result')">
    <label for="name">First name:</label>
    <input id="name" type="text" name="name" ng-model="person.name" required />
    <br />{{person.name'}}
    <label for="email">Last name:</label>
    <input id="email" type="text" name="email" ng-model="person.email" data-parsley-type="email" required />
    <br />
    <br />
    <button type="submit">Submit</button>
</form>

Hope this could help you. Thanks.

jyrkim · Accepted Answer · 2015-02-09T17:25:17.603

Updated, this is code that was just tested with php and Apache - and it works. I also changed your server.php file like below. The file was created based on AngularJS Hub's Server Calls sample. The same source was used to create mainController.js' $http.post(...) method call so that it successfully posts data to the server.

Screenshot (after submit)

enter image description here

server.php

<?php
 if ($_SERVER["REQUEST_METHOD"] === "POST")
  {

   $result = "POST request received!";

  if (isset($_GET["name"]))
  {
    $result .= "\nname = " . $_GET["name"];
  }

  if (isset($_GET["email"]))
  {
    $result .= "\nemail = " . $_GET["email"];
  }

  if (isset($HTTP_RAW_POST_DATA))
  {
    $result .= "\nPOST DATA: " . $HTTP_RAW_POST_DATA;
  }

  echo $result;
  }

?>

personForm.html

   <!DOCTYPE html>
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title></title>

    </head>
        <body ng-app="mainModule">
            <div ng-controller="mainController">
                <form name="personForm1" validate ng-submit="submit()">
                    <label for="name">First name:</label>
                    <input id="name" type="text" name="name" ng-model="person.name" required />
                    <br />
                    {{person.name}}
                    <br />
                    <label for="email">email:</label>
                    <input id="email" type="text" name="email" ng-model="person.email" required />
                    <br />
                    <br />
                    <button type="submit">Submit</button>
                </form>
                <br />
                <div>
                    {{serverResponse}}
                </div>
            </div>

            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
            <script src="mainController.js"></script>
            <!--<script type="text/javascript" src="script/parsley.js"></script>
            <script src="script.js"></script>-->
        </body>

</html>

mainController.js

angular.module("mainModule", [])
  .controller("mainController", function ($scope, $http)
  {
  $scope.person = {};

  $scope.serverResponse = "";

  $scope.submit = function ()
  {

      console.log("form submit");

      var params = {
          name: $scope.person.name,
          email: $scope.person.email
      };

      var config = {
          params: params
      };

      $http.post("server.php", $scope.person, config)
      .success(function (data, status, headers, config)
      {
          console.log("data " + data + ", status "+ status + ", headers "+ headers + ", config " + config);
          $scope.serverResponse = data;
          console.log($scope.serverResponse);
      })
      .error(function (data, status, headers, config)
      { console.log("error");
          $scope.serverResponse = "SUBMIT ERROR";


       });
      };
  });// JavaScript source code

Alternative way, with JSON handling:

server_json.php

<?php
  if ($_SERVER["REQUEST_METHOD"] === "POST")
  {
     /* code source: http://stackoverflow.com/a/22852178/2048391 */
     $data = array();
     $json = file_get_contents('php://input'); // read JSON from raw POST data

     if (!empty($json)) {
        $data = json_decode($json, true); // decode
     }

     print_r($data);

    }

  ?>

Screenshot (after submit)

Screenshot

@SettiMahesh Do you mean when you post from angularjs? Check from your server log if you're getting the the data that was posted from your controller. Secondly, add console.log("succes") in your angular controller to test are you getting a response from your server.php. + you probably have to use the config: "application/x-www-form-urlencoded", like suggested by idan and add {{$scope.serverResponse}} to your view. — jyrkim, Feb 08 '15 at 18:18
@SettiMahesh Also check this out which is related $http.post http://stackoverflow.com/a/12191613/2048391 — jyrkim, Feb 08 '15 at 18:43
@SettiMahesh I updated my answer. The code is now tested with php and Apache and it successfully submits data to the server. — jyrkim, Feb 09 '15 at 12:20
thank you, i have doubt. angularjs will send json data($scope.person) but how did you got data in php without json_decoder ? — learner, Feb 09 '15 at 14:09
@SettiMahesh, you are right, it looks like it can be done both ways, by using json_decode or by $_GET["name"]; and so on. I added a code sample that uses json_decode More info: http://stackoverflow.com/a/22852178/2048391 and http://www.w3schools.com/php/php_forms.asp — jyrkim, Feb 09 '15 at 17:33
Thank so much @jyrkim, you done awesome work. can i use $_POST instant of $_GET ? — learner, Feb 10 '15 at 06:47
@SettiMahesh No problem :-) Yes, I think $_GET and $_POST are interchangeable, so it looks like that you can use one in place of another: "Both GET and POST are treated as $_GET and $_POST". http://www.w3schools.com/php/php_forms.asp — jyrkim, Feb 10 '15 at 09:12

Angularjs and jquery not working in my regular simple form

3 Answers3

Linked