CREATE TABLE `skills` (
`id` int(11) NOT NULL,
`skillname` varchar(150) NOT NULL,
`username` varchar(150) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
ALTER TABLE `skills`
ADD PRIMARY KEY (`id`);
ALTER TABLE `skills`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=1;
//index.html
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Dynamic Add Remove Input Fields with PHP and Mysql</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.9/angular.min.js"></script>
</head>
<body>
<div class="container">
<div class="col-md-8">
<h3 align="center">AngularJS Dynamic Add Remove Input Fields with PHP and Mysql</h3>
<br />
<div ng-app="angularappaddremovefields" ng-controller="dynamicController" class="container" ng-init="fetchData()">
<div class="alert alert-success alert-dismissible" ng-show="success" >
<a href="#" class="close" aria-label="close">×</a>
{{successMessage}}
</div>
<div class="alert alert-danger alert-dismissible" ng-show="error" >
<a href="#" class="close" aria-label="close">×</a>
{{errorMessage}}
</div>
<form method="post" ng-submit="submitForm()">
<div class="form-group">
<label>Enter Your Name</label>
<input type="text" name="username" id="username" ng-model="formData.username" class="form-control" />
</div>
<fieldset ng-repeat="row in rows">
<div class="form-group">
<label>Enter Your Skills</label>
<div class="row">
<div class="col-md-9">
<input type="text" name="txtskills[]" class="form-control" ng-model="formData.skill[$index + 1]" />
</div>
<div class="col-md-3">
<button type="button" name="remove" ng-model="row.remove" class="btn btn-danger btn-sm" ng-click="removeRow()"><span class="glyphicon glyphicon-minus"></span></button>
</div>
</div>
</div>
</fieldset>
<div class="form-group">
<button type="button" name="add_more" class="btn btn-success" ng-click="addRow()"><span class="glyphicon glyphicon-plus"></span> Add</button>
<input type="submit" name="submit" class="btn btn-info" value="Save" />
</div>
</form>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<tr>
<th>Skills</th>
</tr>
<tr ng-repeat="rs in skillData">
<td>{{rs.skillname}}</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<script>
var app = angular.module('angularappaddremovefields', []);
app.controller('dynamicController', function($scope, $http){
$scope.success = false;
$scope.error = false;
$scope.fetchData = function(){
$http.get('fetch_data.php').success(function(data){
$scope.skillData = data;
});
};
$scope.rows = [{username: 'txtskills[]', username: 'remove'}];
$scope.addRow = function(){
var id = $scope.rows.length + 1;
$scope.rows.push({'id':'dynamic'+id});
};
$scope.removeRow = function(row){
var index = $scope.rows.indexOf(row);
$scope.rows.splice(index, 1);
};
$scope.formData = {};
$scope.formData.username = "cairocoders";
$scope.submitForm = function(){
$http({
method:"POST",
url:"insert.php",
data:$scope.formData
}).success(function(data){ console.log(data);
if(data.error != '')
{
$scope.success = false;
$scope.error = true;
$scope.errorMessage = data.error;
}
else
{
$scope.success = true;
$scope.error = false;
$scope.successMessage = data.message;
$scope.formData = {};
$scope.formData.username = "cairocoders";
$scope.rows = [{username: 'txtskills[]', username: 'remove'}];
$scope.fetchData();
}
});
};
});
</script>
</body>
</html>
fetch_data.php
//fetch_data.php
<?php
include('dbcon.php');
$query = "SELECT * FROM skills ORDER BY id";
$statement = $connect->prepare($query);
if($statement->execute())
{
while($row = $statement->fetch(PDO::FETCH_ASSOC))
{
$data[] = $row;
}
echo json_encode($data);
}
?>
insert.php
//insert.php
<?php
include('dbcon.php');
$form_data = json_decode(file_get_contents("php://input"));
$error = '';
$message = '';
$validation_error = '';
$username = '';
$txtskills = '';
$username = $form_data->username;
if(empty($form_data->skill))
{
$error[] = 'Skill is Required';
}else{
foreach($form_data->skill as $rs)
{
$txtskills .= $rs . ', ';
}
$txtskills = substr($txtskills, 0, -2);
}
$data = array(
':username' => $username,
':txtskills' => $txtskills
);
if(empty($error))
{
$query = "
INSERT INTO skills
(username, skillname) VALUES
(:username, :txtskills)
";
$statement = $connect->prepare($query);
if($statement->execute($data))
{
$message = 'Data Inserted '.$username.' = '.$txtskills.'';
}
}else {
$validation_error = implode(", ", $error);
}
$output = array(
'error' => $validation_error,
'message' => $message
);
echo json_encode($output);
?>
dbcon.php
//dbcon.php
<?php
$connect = new PDO("mysql:host=localhost;dbname=testingdb", "root", "");
?>
