Values of input field showing in console but not in input field + not able to save to the db

Question

I am working with angular and the angular material (material design) dependency.

I have this main grid that when i click on it a tile will be created and when i click on that tile a pop up appears. In that pop up is a form with 2 input fields that should display the x and y coordinates of the tile. The values don't show in the input field but they do in my console.

What i am trying to achieve is to be able to save these coordinates to my db. For some reason when i hit save it does not get saved to my db.

Here is my code for the pop up box:

<form ng-controller="AppCtrl">

          <div layout="row">
              <input type="text" id="coord_x" name="coordinate_x" value="" ng-model="task_coordinate_x" >
              <input type="text" id="coord_y" name="coordinate_y" value="" ng-model="task_coordinate_y">
          </div>
</form>

The code for my app.js:

app.controller('AppCtrl', function($scope, $mdDialog, $http) {  
$scope.save_task = function() {
            $http.post('db.php?action=add_task', 
                {
                    'task_coordinate_x'          : $scope.task_coordinate_x,
                    'task_coordinate_y'          : $scope.task_coordinate_y
                }
            )

            .success(function (data, status, headers, config) {
                //$scope.get_task(); //this will fetch latest record from DB
console.log("The task has been added successfully to the DB");
                console.log(data);
            })
            .error(function(data, status, headers, config) {
                console.log("Failed to add the task to DB");
            });

function snapToGrid(x, y, $element, animate) {

        //Set gridsize and offsets
        var gridSizeX = 60;
        var offsetX = 0;
        var gridSizeY = 69;
        var offsetY = 10;

        //calculate the x and y positions on the grid
        var newX = x - ( x % gridSizeX );
        var newY = y - ( y % gridSizeY );

        // pass the x and x to the popup hidden input field to be able to save to db
        localStorage.setItem('coordinateX', newX);
        localStorage.setItem('coordinateY', newY);
        console.log("NewX: " + newX);
        console.log("NewY: " + newY);

        //apply the new positions
        if(animate){
            $element.animate({
                top: offsetY + newY,
                left: offsetX + newX,
            }, 200)
        }else{
            $element.css({
                top: offsetY + newY,
                left: offsetX + newX,
            })
        }
    }

};

This is my php code:

<?php 
    include('config.php');

    switch($_GET['action'])  {

        case 'add_task' :
            add_task(); 
            break;
    }


    /**  Function to add a task to db **/
    function add_task() {
        $data = json_decode(file_get_contents("php://input")); 
        $task_coordinate_x            = $data->task_coordinate_x;
        $task_coordinate_y            = $data->task_coordinate_y;

        print_r($data);

    $qry = 'INSERT INTO tblTask(task_coordinate_x, task_coordinate_y) 
                VALUES ("' 
                . $task_coordinate_x . '","' 
                . $task_coordinate_y . '")';

        echo ($qry);

        $qry_res = mysql_query($qry);
        if ($qry_res) {
            $arr = array('msg' => "Task added successfully!!!", 'error' => '');
            $jsn = json_encode($arr);
            // print_r($jsn);
        } 
        else {
            $arr = array('msg' => "", 'error' => 'Error in inserting record');
            $jsn = json_encode($arr);
            // print_r($jsn);
        }
    }
?>

Answer 1

i think the problem might happen in php

type in your address bar: http://yourservername.com/db.php/action=debug

make a php function

 switch($_GET['action'])  {

        case 'debug' :
            debug(); 
            break;
    }

function debug() {

$qry = 'INSERT INTO tblTask(task_coordinate_x, task_coordinate_y) 
            VALUES ("' 
             some value '","' 
            some value '")'
    or trigger_error("Query Failed! SQL: $sql - Error: ".mysqli_error(), E_USER_ERROR

);}

and make sure its work

I hope it helps.