Table of Contents
Tutorial: Add Form Fields Dynamically using AngularJS with PHP/MySQLi with Source Code
About How to Add Form Fields Dynamically using AngularJS
This is a tutorial on how to Add Form Fields Dynamically using AngularJS with PHP/MySQLi. I’ve used CDN for Bootstrap and Angular JS in this tutorial, so you need an internet connection for them to work.
Related Tutorials: Signup and Register using AngularJS, How to Fetch MySQL Data Using AngularJS
Creating a Database
First, we are going to create our database.
1. Open phpMyAdmin.
2. Click databases, create a database and name it as angular.
3. After creating a database, click the SQL and paste the below codes. See image below for detailed instruction.
CREATE TABLE `members` ( `memid` int(11) NOT NULL AUTO_INCREMENT, `firstname` varchar(30) NOT NULL, `lastname` varchar(30) NOT NULL, `address` text NOT NULL, PRIMARY KEY(`memid`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
index.html
Next, this is a index that contains an add form.
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8">
<title>AngularJS Adding Form Fields Dynamically with PHP/MySQLi</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>
<body ng-controller="memberdata" ng-init="fetch()">
<div class="container">
<h1 class="page-header text-center">AngularJS Adding Form Fields Dynamically with PHP/MySQLi</h1>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="alert alert-success text-center" ng-show="success">
<button type="button" class="close" ng-click="clearMessage()"><span aria-hidden="true">×</span></button>
<i class="fa fa-check"></i> {{ successMessage }}
</div>
<div class="alert alert-danger text-center" ng-show="error">
<button type="button" class="close" ng-click="clearMessage()"><span aria-hidden="true">×</span></button>
<i class="fa fa-warning"></i> {{ errorMessage }}
</div>
<form name="addForm" novalidate>
<fieldset ng-repeat="memberfield in memberfields">
<div class="panel panel-default">
<div class="panel-body">
<div class="row">
<div class="col-md-3">
<input type="text" placeholder="Firstname" class="form-control" ng-model="memberfield.firstname" required>
</div>
<div class="col-md-3">
<input type="text" placeholder="Lastname" class="form-control" ng-model="memberfield.lastname" required>
</div>
<div class="col-md-5">
<input type="text" placeholder="Address" class="form-control" ng-model="memberfield.address" required>
</div>
<button class="btn btn-danger btn-sm" ng-show="$last" ng-click="removeField()"><span class="glyphicon glyphicon-remove"></span></button>
</div>
</div>
</div>
</fieldset>
<button type="button" class="btn btn-primary" ng-click="newfield()"><span class="glyphicon glyphicon-plus"></span> Add</button>
<button type="button" class="btn btn-primary" ng-disabled="addForm.$invalid" ng-click="submitForm()"><span class="glyphicon glyphicon-floppy-disk"></span> Save</button>
</form>
<table class="table table-bordered table-striped" style="margin-top:10px;">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="member in members">
<td>{{ member.firstname }}</td>
<td>{{ member.lastname }}</td>
<td>{{ member.address }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script src="angular.js"></script>
</body>
</html>angular.js
This contains an angular js scripts.
var app = angular.module('app', []);
app.controller('memberdata', function($scope, $http){
$scope.success = false;
$scope.error = false;
$scope.fetch = function(){
$http.get("fetch.php").success(function(data){
$scope.members = data;
});
}
$scope.memberfields = [{id: 'field1'}];
$scope.newfield = function(){
var newItem = $scope.memberfields.length+1;
$scope.memberfields.push({'id':'field'+newItem});
}
$scope.submitForm = function(){
$http.post('add.php', $scope.memberfields)
.success(function(data){
if(data.error){
$scope.error = true;
$scope.success = false;
$scope.errorMessage = data.message;
}
else{
$scope.error = false;
$scope.success = true;
$scope.successMessage = data.message;
$scope.fetch();
$scope.memberfields = [{id: 'field1'}];
}
});
}
$scope.removeField = function() {
var lastItem = $scope.memberfields.length-1;
$scope.memberfields.splice(lastItem);
};
$scope.clearMessage = function(){
$scope.success = false;
$scope.error = false;
}
});fetch.php
This is a PHP api/code that fetches data from a MySQL database.
<?php
$conn = new mysqli('localhost', 'root', '', 'angular');
$output = array();
$sql = "SELECT * FROM members";
$query=$conn->query($sql);
while($row=$query->fetch_array()){
$output[] = $row;
}
echo json_encode($output);
?>add.php
Lastly, this is a PHP api/code in adding one or multiple rows into a database on how to Add Form Fields Dynamically using AngularJS with PHP/MySQLi.
<?php
$conn = new mysqli('localhost', 'root', '', 'angular');
$data = json_decode(file_get_contents("php://input"));
$count = count($data);
$out = array('error' => false);
foreach($data as $key => $value){
$firstname = $value->firstname;
$lastname = $value->lastname;
$address = $value->address;
$sql = "INSERT INTO members (firstname, lastname, address) VALUES ('$firstname', '$lastname', '$address')";
$query = $conn->query($sql);
}
if($query){
$out['message'] = "($count) Member/s added successfully";
}
else{
$out['error'] = true;
$out['message'] = "Cannot add Member(s)";
}
echo json_encode($out);
?>
