Angular JS with PHP with Input field and Submit Button

Question

I have UI with Input field and Submit Button,And After Entering Number in field and clicking on Submit Button. I want this to go to first.php file and second.php depends on the first.php response. At the end I want to show to value from second.php, Can you please help me on this.

And I am using AngularJS with PHP And I am creating 2 functions with in one controller and calling 2 functions at time by clicking on button Can you please suggest me on the approach?

HTML Code

<html>
    <div ng-controller="get_controller">
        <input type="text" ng-model="accountnumber" name="accountnumber" class="form-control search-query" placeholder="Enter Account Number">
        <span class="input-group-btn">
              <button type="submit" ng-click="sendAccountNumber();geValues()" class="btn btn-primary">Submit</button>
        </span>
    </div>

    <div ng-controller="get_controller">
        <table>
            <tbody>
                <tr>
                    <th ng-repeat="list in personDetails">{{list.Name}}
                    </th>
                </tr>
                <tr>
                    <td class="features" ng-repeat="list in personDetails">{{list.Location}}
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</html>

AngularJS

   var app = angular.module('myApp', ["ngTable"]);
app.controller('get_controller', function($scope, $http) {

    $scope.sendAccountNumber = function() {
        var request = $http({
            method: "post",
            url: "first.php",
            data: {
                accountnumber: $scope.accountnumber
            },
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            }

        });

        /* Check whether the HTTP Request is successful or not. */
        request.success(function(data) {
            console.log("Account Number " + data + " Sent to first.php");
        });
    }


    $scope.geValues = function() {
        $http({
            method: 'POST',
            url: 'second.php'
        }).success(function(data) {
            $scope.post = data;
            $scope.personDetails = Employee;
        })
    },
});

Check my answer stackoverflow.com/a/39717293/6608101

Mohit Tanwani
– Mohit Tanwani

2016-09-27 07:54:45 +00:00
Commented Sep 27, 2016 at 7:54 — Mohit Tanwani
– Mohit Tanwani, Commented Sep 27, 2016 at 7:54

Mohit Tanwani · Accepted Answer · 2016-09-27 06:22:00Z

1

You can call your next function call in the promise of the first call in the following way:

    //First function
    $scope.firstFunction = function(){
        $http({
          method: 'POST',
          url: 'first.php',
          headers: {'Content-Type': 'application/x-www-form-urlencoded'},
          data: data
        }).then(
            function (response) {
                var data = response.data;
                $scope.secondFunction(data);
                // not relevant
            }, function (error) {
                var data = error.data;
                // not relevant
        });
    }
   //Second function
    $scope.secondFunction = function(data)
    {
        $http({
          method: 'POST',
          url: 'second.php',
          headers: {'Content-Type': 'application/x-www-form-urlencoded'},
          data: data
        }).then(
            function (response) {
                var newData = response.data;
                // not relevant
            }, function (error) {
                var newData = error.data;
                // not relevant
        });
    }

And call a one function firstFunction() on button click only.

<button type="button" ng-click="firstFunction();" class="btn btn-primary">Submit</button>

FYI,

I would recommend to use ng-submit() event for form to submit the form data rather then submitting by submit event of your form.
And one more thing, why would you request two ajax calls ? You can do both the server side operations in single call only.

Hope this helps you :)

edited Sep 27, 2016 at 6:22

answered Sep 27, 2016 at 6:15

Mohit Tanwani

6,6382 gold badges16 silver badges33 bronze badges

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

10 Comments

Mahesh G Over a year ago

Thanks !! Here in my case I have to do POST method for the first.php and GET method for the second.php will this work

Mohit Tanwani Over a year ago

You just need to change your Ajax Params as per your need.

Mohit Tanwani Over a year ago

Is everything ok ?

Mahesh G Over a year ago

Hi I need to send the session from first.php to second.php and then I need to display the value from second.php Do I need to use 2 POST action(one for sending input field to first.php and another from first.php to second.php) and 1 GET(for getting values from second.php) action?

Mahesh G Over a year ago

Yeah I tried I am able to show values from first.php in console log but not working for second.php

|

Collectives™ on Stack Overflow

Angular JS with PHP with Input field and Submit Button

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related