Submitting angular form to a php file

Question

I'm trying to submit the form below to a php file called time.php, but its not working, even when I check the console there are no errors, its just clear. I'm not sure where I may be going wrong.

<form ng-controller="testCtrl" class="customform" data-ng-init="init()">
<div class="s-10 1-10">
    <input ng-model="firstName" pattern=".{2,100}" title="2 to 100 Characters" placeholder="First Name" type="text" required />
</div>
<div class="s-10 1-10">
    <input ng-model="lastName" pattern=".{5,255}" title="5 to 255 Characters" placeholder="Last Name" type="text" required />
</div>
<div class="s-12 l-10"><input ng-model="acNumber" placeholder="A/C Number" title="Employee Number, i.e c1234567" type="text" required /></div>
<div class="s-12 l-10"><input ng-model="email" placeholder="Email" title="Email" type="email" required /></div>
<div class="s-12 l-10">
    <select ng-model="selectedRequestType" ng-options="requestType as requestType.type for requestType in requestTypes" required="required">
        <option value="" disabled selected>Request Type</option>
    </select>
</div>
<div class="s-12 l-10">
    <select ng-show="selectedRequestType.type == 'Work Request'" ng-model="selectedWorkRequestType" ng-options="workRequestType as workRequestType.type for workRequestType in workRequestTypes">
        <option value="" disabled selected>Work Request Type</option>
    </select>
</div>
<div class="s-12 l-10">
    <select ng-show="selectedWorkRequestType.type == 'New file(s) from source'" ng-model="selectedFile" ng-options="file as file.type for file in files">
        <option value="" disabled selected>Files</option>
    </select>
</div>
<div class="s-12 l-10">
    <select ng-show="selectedWorkRequestType.type == 'New file(s) from source'" ng-model="selectedLibrary" ng-options="library as library.type for library in libraries">
        <option value="" disabled selected>Does Library Exist</option>
    </select>
</div>
<div class="s-12 l-10">
    <select ng-show="selectedWorkRequestType.type == 'Code Automation' || selectedWorkRequestType.type == 'Amendments to existing code'" ng-model="selectedOutput" ng-options="outputType as outputType.type for outputType in outputTypes">
        <option value="" disabled selected>Output</option>
    </select>
</div>
<div class="s-12 l-10">
    <select ng-show="selectedLibrary.type == 'Yes' || selectedRequestType.type == 'Incident'" ng-model="selectedPlatformOutput" ng-options="platformOutput as platformOutput.type for platformOutput in platformOutputs">
        <option value="" disabled selected>Platform Output</option>
    </select>
</div>
<div class="s-12 l-10">
    <input ng-show="selectedOutput.type == 'SAS' || selectedPlatformOutput.type =='SAS'" ng-model="sasLibraryName" type="text" placeholder="SAS Library Name: SPDS Exploit" />
</div>
<div class="s-12 l-10">
    <input ng-show="selectedOutput.type == 'SAP IQ' || selectedPlatformOutput.type =='SAP IQ'" ng-model="sapIQtext" placeholder="SAP IQ" >
</div>
<div class="s-12 l-10">
    <input ng-show="selectedOutput.type == 'Hadoop' || selectedPlatformOutput.type =='Hadoop'" placeholder="Library Name: HDFS_Exploit" ng-model="hadoop" />
</div>
<div class="s-12 l-10">
    <input ng-show="selectedWorkRequestType.type == 'Amendments to existing code'" placeholder="Output Dataset Name" ng-model="outputDataset" type="text"/>
</div>
<div class="s-12 l-10">
    <input ng-show="selectedLibrary.type == 'No'" type="text" ng-model="productName" Placeholder="Product Name" />
</div>
<div class="s-12 l-10">
    <input ng-show="" placeholder="Upload Text File" type="file" ng-model="uploadTextFile" title="Please upload a txt file with the layout - to " multiple />
</div>
<div class="s-12 l-10">
    <input ng-show="selectedRequestType.type == 'Incident'" type="text" ng-model="tableName" placeholder="Dataset/Table Name" />
</div>
<div class="s-12 l-10">
    <textarea placeholder="Special Instructions" ng-model="specialInstruction" rows="5"></textarea>
</div>
<div class="s-12 l-10">
    <input ng-show="selectedRequestType.type == 'Incident'" ng-model="uploadScreenshot" placeholder="Upload Screenshot of error" type="file" multiple/>
</div>
<div class="s-12 l-10">
    <select ng-show="selectedRequestType.type == 'Work Request'" ng-model="selectedFrequency" ng-options ="frequency as frequency.type for frequency in frequencies">
        <option value="" disabled selected>Frequency</option>
    </select>
</div>
<div class="s-12 l-10">
    <select ng-show="selectedFrequency.type == 'Weekly'" ng-model="selectedWeekly"  ng-options ="weekly as weekly.type for weekly in weeklies">
        <option value="" disabled selected>Weekly Frequency</option>
    </select>
</div>
<input type="hidden" ng-model="token" value="<?php echo Token::generate()?>">
<div class="s-4"><button type="submit" id="submit" class="btn-custom btn btn-large btn-block" ng-click="sendRequest()">Request</button></div>

Please note: ng-app="app" is located in the header:

<!DOCTYPE html>
<html lang="en-US" ng-app="app">

The following code is the controller, and I believe the issue lies somewhere in here:

    var app = angular.module('app', []);
app.controller('testCtrl', ['$scope', '$http', function($scope, $http) {

$scope.sendRequest = function(){
    var data= {
        'firstName' :$scope.firstName,
        'lastName' :$scope.lastName,
        'acNumber' :$scope.acNumber,
        'email' :$scope.email,
        'selectedRequestType' :$scope.selectedRequestType,
        'selectedWorkRequestType' :$scope.selectedWorkRequestType,
        'selectedOutput' :$scope.selectedOutput,
        'selectedFrequency' : $scope.selectedFrequency,
        'selectedWeekly' : $scope.selectedWeekly,
        'selectedFile' : $scope.selectedFile,
        'selectedLibrary' : $scope.selectedLibrary,
        'selectedPlatformOutput' : $scope.selectedPlatformOutput,
        'productName' : $scope.productName
    };


    $http({
        url: "time.php",
        method: "POST",
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        data: data
    }).success(function(data, status, headers, config) {
        //Success code
    }).error(function(xhr) {
        //Failure code
        console.log(data);
        console.log(xhr.responseText);
    });

    return false;
  //  $window.location.href ='/time.php';

};

$scope.init = function (){
    $scope.workRequestType = 'test';
    $scope.requestTypes = [
        {'type':'Work Request'},
        {'type': 'Incident'}
    ];
    $scope.workRequestTypes = [
        {'type': 'Amendments to existing code'},
        {'type': 'Code Automation'},
        {'type': 'New file(s) from source'}
    ];
    $scope.outputTypes = [
        {'type': 'SAS'},
        {'type':'SAP IQ'},
        {'type': 'Hadoop'}
    ];
    $scope.frequencies = [
        {'type' : 'Daily'},
        {'type': 'Monthly'},
        {'type': 'Weekly'}
    ];
    $scope.weeklies = [
        {'type': 'Monday'},
        {'type':'Tuesday'},
        {'type': 'Wednesday'},
        {'type':'Thursday'},
        {'type':'Friday'},
        {'type':'Saturday'},
        {'type':'Sunday'}
    ];
    $scope.files = [
        {'type': 'New File(s)'},
        {'type': 'Add to existing file received'}
    ];
    $scope.libraries = [
        {'type':'Yes'},
        {'type':'No'}
    ];
    $scope.platformOutputs = [
        {'type': 'SAS'},
        {'type':'SAP IQ'},
        {'type': 'Hadoop'}
    ];
    $scope.firstName= null;
    $scope.lastName= null;
    $scope.acNumber= null;
    $scope.email= null;
    $scope.selectedRequestType= null;
    $scope.selectedWorkRequestType= null;
    $scope.selectedOutput= null;
    $scope.sasLibraryName = null;
    $scope.sasIQtext = null;
    $scope.selectedFrequency = null;
    $scope.selectedWeekly = null;
    $scope.selectedFile = null;
    $scope.selectedLibrary = null;
    $scope.selectedPlatformOutput = null;
    $scope.productName = null;
};
}]);

I'm still learning Angular, so I may have made a simple error

Is the error that the HTTP request is not made, or it's made but nothing is returned? — Ryan Jenkin, Oct 18 '16 at 03:33
@JuanCamiloMejia Nothing shows up on the console, So I believe it doesnt reach the server — kya, Oct 18 '16 at 05:03

Ryan Jenkin · Accepted Answer · 2016-10-18T03:51:36.890

3

If the HTTP POST request is taking place, but PHP is not able to access the POST variables, try converting the data from an object to a string.

$http({
        url: "time.php",
        method: "POST",
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        data: $httpParamSerializerJQLike(data),
    })

The string should look like: firstName=John&acNumber=1234

Pass the $httpParamSerializerJQLike service into your controller with:

app.controller('testCtrl', ['$scope', '$http', '$httpParamSerializerJQLike', function($scope, $http, $httpParamSerializerJQLike) {

edited Oct 18 '16 at 03:51

answered Oct 18 '16 at 03:45

Ryan Jenkin

864
8
11

Angular's `$httpParamSerializer` works much better than manual encoding ~ http://stackoverflow.com/a/30970229/283366 – Phil Oct 18 '16 at 03:49
I tried the solution, but I still get nothing on the console – kya Oct 18 '16 at 05:14
@kya The success callback posted above does not have a console, if it was working correctly you would expect nothing on the console. Have you checked the network tab to see if a HTTP request is being made? – Ryan Jenkin Oct 18 '16 at 05:20
@RyanJenkin I see what you mean, On the network tab, it reaches the file time.php. Thanks a lot. The only issue now is redirecting from the current page to "success page" after successfully getting the data to time.php. Are you able to assist me with that ? – kya Oct 18 '16 at 05:28
2

@kya Add a redirect into the success() callback using Angular's $location service: e.g $location.path('/successpage'); – Ryan Jenkin Oct 18 '16 at 05:31

Submitting angular form to a php file

1 Answers1