POSTING data from Angular UI bootstrap modal window to PHP

726 Views Asked by At

I have a angular-ui modal, that is controlled with below controller:

var emailModal = angular.module('myApp.emailModal', ['ui.bootstrap', 'ui.bootstrap.tpls']);

emailModal.controller('ModalCtrl', ['$scope', '$uibModal', function ($scope, $uibModal) {

  $scope.open = function () {
    var modalInstance = $uibModal.open({
      templateUrl: 'components/emailModal/emailModalView.html',
      backdrop: true,
      controller: 'modalInstanceCtrl'
    });
  }
}]);

emailModal.controller('modalInstanceCtrl', function ($scope, $uibModalInstance, $http) {
  //create blank object to handle form data.
  $scope.user = {};
  //calling our submit function.
  $scope.submitForm = function() {
    //posting data to php file
    $http({
      method: 'POST',
      url: 'components/emailModal/emailInsert.php',
      data: $scope.user, //forms user object
      headers: {'Content-Type': 'application/x-www-form-urlencoded'}
    })
        .success(function(data) {
          if (data.errors) {
            //showing errors.
            $scope.errorEmail = data.errors.email;
          } else {
            $scope.message = data.message;
          }
        });
  };
});

This is the actual modal view:

<form name="userForm" ng-submit="submitForm()">
<div class="modal-header">
    <h3 class="modal-title">Register</h3>
</div>
<div class="modal-body">
    <div class="form-group">
        <label>E-Mail Address</label>
        <input type="email" name="email" class="form-control" ng-model="user.email" placeholder="Email address" />
        <span ng-show="errorEmail">{{errorEmail}}</span>
    </div>
</div>
<div class="modal-footer">
    <button type="submit" class="btn btn-default">Submit</button>
</div>
</form>

Modal loads with no problem, bute once clicked to submit, nothing happens. I get no error once so ever in the console. What am I doing wrong? This is my PHP file, as well:

$errors = array();
$data = array();
// Getting posted data and decodeing json
$_POST = json_decode(file_get_contents('php://input'), true);

// checking for blank values.

if (empty($_POST['email']))
    $errors['email'] = 'E-Mail erforderlich.';

if (!empty($errors)) {
    $data['errors']  = $errors;
} else {
    $data['message'] = 'The data should now be inserted into database!';
}
// response back.
echo json_encode($data);
?>

EDIT 1.

The event is triggered in Dev Tools - Network.

This is what I get:

Request URL: http://localhost:63342/url-to/emailInsert.php Request method: POST Remote address: 127.0.0.1:63342 Status code: 200 OK Version HTTP/1.1

The page is not reloading on submit, at all, there is no error in Dev Tools - Console. It gives a OK status even though the email has not been ineserted into input, therefore it should print an error, which it doesn't do.

Any help is greatly appreciated.

0

There are 0 best solutions below