I know that this is a much covered topic, but I am struggling to properly interpret the online answers in relation my problem. Apologies in advance if I am missing something obvious. Any help would be much appreciated.
I am using AngularJS to create my site and have a form that contains a multiple check box field. I am trying to insert the values that a user selects in these checkboxes into a mySQL database using PHP.
When I have tried solutions that I have found here, or in other forums, it makes the submission break with no records submitted to the mySQL database.
Whilst I generally understand how one would go about submitting a multiple check box field to a mySQL database I think that I am struggling to apply these concepts to my current code structure.
My code as it stands is.
index.html
<!-- FORM -->
<form name="plannerRegister" ng-submit="submitForm(plannerRegister.$valid)" novalidate>
<!-- FIRST NAME -->
<div class="form-group" ng-class="{ 'has-error' : plannerRegister.firstname.$invalid && submitted }">
<label>First Name</label>
<input type="text" name="firstname" class="form-control" ng-model="plannerData.firstname" required>
<p ng-show="plannerRegister.firstname.$invalid && submitted" class="help-block">Your first name is required.</p>
</div>
<!-- SURNAME -->
<div class="form-group" ng-class="{ 'has-error' : plannerRegister.surname.$invalid && submitted }">
<label>Surname</label>
<input type="text" name="surname" class="form-control" ng-model="plannerData.surname" required>
<p ng-show="plannerRegister.surname.$invalid && submitted" class="help-block">Your surname is required.</p>
</div>
<!-- COMPANY -->
<div class="form-group" ng-class="{ 'has-error' : plannerRegister.company.$invalid && submitted }">
<label>Company</label>
<input type="text" name="company" class="form-control" ng-model="plannerData.company" required>
<p ng-show="plannerRegister.company.$invalid && submitted" class="help-block">Your company is required.</p>
</div>
<!-- MOBILE NUMBER -->
<div class="form-group" ng-class="{ 'has-error' : plannerRegister.mobile.$invalid && submitted }">
<label>Mobile Number</label>
<input type="tel" name="mobile" class="form-control" ng-model="plannerData.mobile" ng-minlength="10" ng-maxlength="13">
<p ng-show="plannerRegister.mobile.$error.minlength && submitted" class="help-block">Number is too short.</p>
<p ng-show="plannerRegister.mobile.$error.maxlength && submitted" class="help-block">Number is too long.</p>
</div>
<!-- OFFICE NUMBER -->
<div class="form-group" ng-class="{ 'has-error' : plannerRegister.officenum.$invalid && submitted }">
<label>Office Number</label>
<input type="tel" name="officenum" class="form-control" ng-model="plannerData.officenum" ng-minlength="10" ng-maxlength="13">
<p ng-show="plannerRegister.officenum.$error.minlength && submitted" class="help-block">Number is too short.</p>
<p ng-show="plannerRegister.officenum.$error.maxlength && submitted" class="help-block">Number is too long.</p>
</div>
<!-- Services Offered -->
<label>Services Offered</label>
<div class="form-group">
<label class="checkbox-inline">
<input type="checkbox" name="services[]" id="investments" ng-model="plannerData.services.investments"> Investments
</label>
<label class="checkbox-inline">
<input type="checkbox" name="services[]" id="ltinsurance" ng-model="plannerData.services.ltinsurance"> Long-Term Insurance
</label>
<label class="checkbox-inline">
<input type="checkbox" name="services[]" id="stinsurance" ng-model="plannerData.services.stinsurance"> Short-Term Insurance
</label>
<label class="checkbox-inline">
<input type="checkbox" name="services[]" id="taxplanning" ng-model="plannerData.services.taxplanning"> Tax Planning
</label>
<label class="checkbox-inline">
<input type="checkbox" name="services[]" id="estateplanning" ng-model="plannerData.services.estateplanning"> Estate Planning
</label>
</div>
<!-- SUBMIT BUTTON -->
<button type="submit" ng-click="plannerData_submit()" class="btn btn-primary">Submit</button>
</form>
config.php
<?php
$host = "localhost";
$user = "root";
$pass = "";
$database = "plannerregistration";
$con = mysql_connect($host,$user,$pass);
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db($database,$con);
?>
db.php
<?php
include('config.php');
switch($_GET['action']) {
case 'add_planner' :
add_planner();
break;
case 'get_planner' :
get_planner();
break;
};
function add_planner() {
$data = json_decode(file_get_contents("php://input"));
$firstname = $data->firstname;
$surname = $data->surname;
$company = $data->company;
$mobile = $data->mobile;
$officenum = $data->officenum;
print_r($data);
$qry = 'INSERT INTO plannerData (firstname,surname,company,mobile,officenum) values ("' . $firstname . '","' . $surname . '","' . $company . '","'. $mobile .'","' . $officenum . '")';
$qry_res = mysql_query($qry);
if ($qry_res) {
$arr = array('msg' => "Planner Added Successfully!!!", 'error' => '');
$jsn = json_encode($arr);
// print_r($jsn);
}
else {
$arr = array('msg' => "", 'error' => 'Error In inserting planner');
$jsn = json_encode($arr);
// print_r($jsn);
}
};
function get_planner() {
$qry = mysql_query('SELECT * from plannerData');
$data = array();
while($rows = mysql_fetch_array($qry))
{
$data[] = array(
"id" => $rows['id'],
"firstname" => $rows['firstname'],
"surname" => $rows['surname'],
"company" => $rows['company'],
"mobile" => $rows['mobile'],
"officenum" => $rows['officenum']
);
}
print_r(json_encode($data));
return json_encode($data);
};
?>
registrationController.js
registrationApp.controller('registrationController', function($scope, $http) {
$scope.plannerData = {}
// function to submit the form after all validation has occurred
$scope.submitForm = function(isValid) {
// check to make sure the form is completely valid
$scope.submitted = true;
if (isValid) {
alert('our form is amazing');
}
}
$scope.plannerData_submit = function() {
$http.post('scripts/controllers/db.php?action=add_planner',
{
'firstname' : $scope.plannerData.firstname,
'surname' : $scope.plannerData.surname,
'company' : $scope.plannerData.company,
'mobile' : $scope.plannerData.mobile,
'officenum' : $scope.plannerData.officenum
}
)
.success(function (data, status, headers, config) {
alert("Planner has been Submitted Successfully");
$scope.get_planner();
})
.error(function(data, status, headers, config){
});
}
$scope.get_planner = function() {
$http.get("scripts/controllers/db.php?action=get_planner").success(function(data)
{
//$scope.product_detail = data;
$scope.pagedItems = data;
});
}
});
