CODEWITHSUNDEEP
phpmysqlangularjsdatabase
Kyle
Kyle

Reputation: 66

AngularJS and PHP entering blank rows in database

I'm trying to figure out why my data is not being collected by my PHP files. This is my index.html

<!DOCTYPE html>
<html lang="en" ng-app="gemStore">
<head>
    <meta http-equiv='Content-Type':'application/x-www-form-urlencoded; charset=UTF-8' />
    <title>Angular</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div ng-controller="custController">
        <form>
            First Name: <input type="text" ng-model="firstname"><br>
            Last Name: <input type="text" ng-model="lastname"><br>
            Choose Username: <input type="text" ng-model="username"><br>
            Choose Password: <input type="text" ng-model="password"><br>
            Address 1: <input type="text" ng-model="address1"><br>
            Address 2: <input type="text" ng-model="address2"><br>
            City: <input type="text" ng-model="city"><br>
            State: <input type="text" ng-model="state"><br>
            Zip: <input type="number" ng-model="zip"><br>
            <input type="button" value="Submit" ng-click="insertdata()"><br>
        </form>
    </div>

    <script src="js/angular.min.js"></script>
    <script src="js/script.js"></script>
    <script src="js/products.js"></script>
</body>
</html>

This is my script.js

(function(){
    var app = angular.module('gemStore', ['store-products']);
    app.controller('StoreController', ['$http', function($http){
        var store = this;
        store.products = [];
        $http.get('/store-products.json').success(function(data){
            store.products = data;
        });
    }]);

    app.controller('custController', function($scope,$http){
        $scope.insertdata = function(){
            $http.post('insert.php',{'firstname':$scope.firstname,'lastname':$scope.lastname,'address1':$scope.address1,'address2':$scope.address2, 'city':$scope.city,'state':$scope.state,'zip':$scope.zip,'username':$scope.username,'password':$scope.password})
            .success(function(data,status,headers,config){
                console.log('data inserted successfully. First Name: ' + $scope.firstname);
            });
        }
    });
})();

And finally my PHP file

<?php

    $data = json_decode(file_get_contents("php://input"));

    $firstname = mysql_real_escape_string($data->firstname);
    $lastname = mysql_real_escape_string($data->lastname);
    $username = mysql_real_escape_string($data->username);
    $address1 = mysql_real_escape_string($data->address1);
    $address2 = mysql_real_escape_string($data->address2);
    $city = mysql_real_escape_string($data->city);
    $state = mysql_real_escape_string($data->state);
    $zip = mysql_real_escape_string($data->zip);
    $password = mysql_real_escape_string($data->password);

    mysql_connect("localhost","root","");
    mysql_select_db("mydatabase");
    mysql_query("INSERT INTO users (`firstname`, `lastname`, `username`, `password`, `address1`, `address2`, `city`, `state`, `zip`)VALUES('" . $firstname . "','" . $lastname . "','" . $username . "','" . $password . "','" . $address1 . "','" . $address2 . "','" . $city . "','" . $state . "','" . $zip . "')");

?>

I am thinking it has something to do with headers, but I'm not sure where I should add it or what needs to be changed. Any help would be appreciated. Thanks.

Also, I am using angular 1.3.16, but I doubt that makes a difference.

Upvotes: 1

Views: 331

Answers (1)

Nisarg Pujara
Nisarg Pujara

Reputation: 43

try this in your insertdata function.

$scope.insertdata = function(){

var data = {'firstname':$scope.firstname,'lastname':$scope.lastname,'address1':$scope.address1,'address2':$scope.address2, 'city':$scope.city,'state':$scope.state,'zip':$scope.zip,'username':$scope.username,'password':$scope.password};
    $http({
             url:'insert.php', 
             method: 'post',
             headers: {'Content-Type': 'application/x-www-form-urlencoded'},
             transformRequest: function(obj) {
                    var str = [];
                    for(var p in obj)
                    str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
                    return str.join("&");
               },
             data :data
            }).success(function(data,status,headers,config){
            console.log('data inserted successfully. First Name: ' + $scope.firstname);
            });

}

Upvotes: 1

Related Questions