have this form in a pop box (Angular Material) and in this form i have 5 input fields and 2 select list. i am able to populate the select list with data from the db and i am also able to save the data but only from the input fields so not from the select box. So i would like to know how to save the selected option from a select list to my db.
I am working with Angular and PHP for the back-end The db situation is the following: 3 tables
- tblTask
- tblLocation
- tblProjectType
Both id from tblLocation and tblProjectType reference back to tblTask (Foreign Key)
The minute i add the reference of the project type in my php and app.js file then it won't save any more to the db. In the console the following happens -> http://gyazo.com/d9a7b1ef3f60b441fb37c807772a709c
But when i leave it out i am able to save all data from the 5 input fields.
HTML code:
<md-dialog aria-label="">
<form ng-controller="AppCtrl">
<md-toolbar>
<div class="md-toolbar-tools">
<md-input-container md-no-float="">
<input class="customInput" placeholder="Name this task..." name="task_name" ng-model="task_name">
</md-input-container>
<span flex></span>
<md-button class="md-icon-button" ng-click="closeDialog()">
<md-icon md-svg-src="images/ic_close_24px.svg" aria-label="Close dialog"></md-icon>
</md-button>
</div>
</md-toolbar>
<md-dialog-content>
<div>
<div layout="row">
<div class="labelPosition">
<md-select-label>Project type</md-select-label>
</div>
<div id="containerSelectListProjectType">
<md-select ng-model="task_project_type" name="project_type" placeholder="Choose a project type" id="containerProjectType">
<md-option ng-repeat="projecttype in projectTypeInfo" ng-value="{{projecttype.id_ProjectType}}">{{projecttype.project_type}}</md-option>
</md-select>
</div>
</div>
<br/>
<div layout="row">
<div class="labelPosition">
<md-select-label>Location</md-select-label>
</div>
<div id="containerSelectListLocation">
<md-select ng-model="task_location" name="location" placeholder="Choose your location">
<md-option ng-repeat="location in locationInfo" ng-value="{{location.id_Location}}">{{location.location}}</md-option>
</md-select>
</div>
</div>
<br/>
<div layout="row">
<div class="labelPosition">
<md-select-label>Estimate time</md-select-label>
</div>
<div id="containerEstimateTime">
<md-chips ng-model="ctrl.numberChips2">
<input type="number" ng-model="task_estimate_time" ng-model="ctrl.numberBuffer" placeholder="Enter a number" name="task_estimate_time">
</md-chips>
</div>
</div>
<br/>
<div layout="row">
<div class="labelPositionCP">
<md-select-label>Client/Project</md-select-label>
</div>
<div id="containerClientProject">
<md-input-container md-no-float="">
<input name="project_client_name" placeholder="Project/Client name" ng-model="task_project_client_name">
</md-input-container>
</div>
</div>
<br />
<div layout="row">
<div class="labelPosition">
<md-select-label>Url</md-select-label>
</div>
<div id="containerUrl">
<md-input-container md-no-float="">
<input name="url" placeholder="Url" ng-model="task_url">
</md-input-container>
</div>
</div>
<br />
<div layout="row">
<div class="labelPosition">
<md-select-label>Resource link</md-select-label>
</div>
<div id="containerResourceLink">
<md-input-container md-no-float="">
<input name="resource_link" placeholder="Resource link" ng-model="task_resource_link">
</md-input-container>
</div>
</div>
<br />
<div layout="row">
<div class="labelPosition">
<md-select-label>Note's</md-select-label>
</div>
<div id="containerNotes">
<md-input-container md-no-float="">
<textarea ng-model="task_notes" ng-model="task_notes" placeholder="Note's" columns="1" md-maxlength="150"></textarea>
</md-input-container>
</div>
</div>`enter code here`
</div>
</md-dialog-content>
<div class="md-actions" layout="row">
<md-button class="md-primary">Delete</md-button>
<md-button class="md-primary">Url</md-button>
<md-button class="md-primary">Resource link</md-button>
<md-button class="md-primary">Note's</md-button>
<md-button class="md-primary">Cancel</md-button>
<md-button ng-click="save_task()" class="md-primary">Save</md-button>
</div>
</form>
</md-dialog>
My app.js file
app.controller('AppCtrl', function($scope, $mdDialog, $http) {
$scope.taskInfo = [];
$scope.save_task = function(){
$http.post('db.php?action=add_task',
{
'task_name' : $scope.task_name,
'id_ProjectType' : $scope.task_project_type,
'task_project_client_name' : $scope.task_project_client_name,
'task_url' : $scope.task_url,
'task_resource_link' : $scope.task_resource_link,
'task_notes' : $scope.task_notes
}
)
.success(function (data, status, headers, config) {
//$scope.userInfo.push(data);
//$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");
});
}
//Populating select list with data from DB for project type
$scope.getProjectTypeFunction = function() {
$http.get('db.php?action=get_ProjectType_Info').success(function(data)
{
$scope.projectTypeInfo = data;
console.log("Retrieved data from server");
//console.log(data);
})
.error(function(data, status, headers, config)
{
console.log("Error in retrieving data from server");
});
}
$scope.getProjectTypeFunction(); //-- call the function that calls $http
//Populating select list with data from DB for location
$scope.getLocationFunction = function() {
$http.get('db.php?action=get_Location_Info').success(function(data)
{
$scope.locationInfo = data;
console.log("Retrieved data from server");
//console.log(data);
})
.error(function(data, status, headers, config)
{
console.log("Error in retrieving data from server");
});
}
$scope.getLocationFunction(); //-- call the function that calls $http
});
My php code:
<?php
include('config.php');
switch($_GET['action']) {
case 'get_ProjectType_Info' :
get_ProjectType_Info();
break;
case 'add_task' :
add_task();
break;
case 'get_Location_Info' :
get_Location_Info();
break;
}
/** Function to data from tblProjectType **/
function get_ProjectType_Info(){
$qry = mysql_query('SELECT * from tblProjectType');
$data = array();
while($rows = mysql_fetch_array($qry))
{
$data[] = array(
"id_ProjectType" => $rows['id_ProjectType'],
"project_type" => $rows['project_type']
);
}
print_r(json_encode($data));
//return json_encode($data);
}
/** Function to data from tblLocation **/
function get_Location_Info(){
$qry = mysql_query('SELECT * from tblLocation');
$data = array();
while($rows = mysql_fetch_array($qry))
{
$data[] = array(
"id_Location" => $rows['id_Location'],
"location" => $rows['location']
);
}
print_r(json_encode($data));
//return json_encode($data);
}
/** Function to add a task to db **/
function add_task() {
$data = json_decode(file_get_contents("php://input"));
$task_name = $data->task_name;
$task_project_type = $data->id_ProjectType;
/**$task_location = $data->id_Location;
$task_estimate_time = $data->task_estimate_time;**/
$task_project_client_name = $data->task_project_client_name;
$task_url = $data->task_url;
$task_resource_link = $data->task_resource_link;
$task_notes = $data->task_notes;
print_r($data);
$qry = 'INSERT INTO tblTask(task_name, id_ProjectType, task_project_client_name, task_url, task_resource_link, task_notes)
VALUES ("' . $task_name . '","' . $task_project_type . '","' . $task_project_client_name . '","' . $task_url . '","' . $task_resource_link . '","' . $task_notes .'")';
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);
}
}
?>
