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
– simeg, Commented Feb 8, 2015 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
– learner, Commented Feb 8, 2015 at 13:16

idan · Accepted Answer · 2015-02-09 06:44:51Z

2

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

edited Feb 9, 2015 at 6:44

answered Feb 8, 2015 at 11:35

idan

4844 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Pankaj Parkar Over a year ago

does content type really required in header & why?

learner Over a year ago

According my form requirement i need to use parsley.js but it is not working when i included angularjs.

learner Over a year ago

i given ajax submission but i didnt get any any serverResponse

idan Over a year ago

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 Over a year ago

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

|

jyrkim · Accepted Answer · 2015-02-09 17:25:17Z

1

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

edited Feb 9, 2015 at 17:25

answered Feb 8, 2015 at 11:36

jyrkim

2,8791 gold badge26 silver badges35 bronze badges

8 Comments

learner Over a year ago

in server.php can use standard method or ajax method?

jyrkim Over a year ago

@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 Over a year ago

@SettiMahesh Also check this out which is related $http.post stackoverflow.com/a/12191613/2048391

jyrkim Over a year ago

@SettiMahesh I updated my answer. The code is now tested with php and Apache and it successfully submits data to the server.

learner Over a year ago

thank you, i have doubt. angularjs will send json data($scope.person) but how did you got data in php without json_decoder ?

|

Pankaj Parkar · Accepted Answer · 2015-02-08 12:06:52Z

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.

Collectives™ on Stack Overflow

Angularjs and jquery not working in my regular simple form

3 Answers 3

6 Comments

8 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related