Adding Form Fields Dynamically with PHP/MySQLi in AngularJS

Projects Inventory

2 weeks ago

Creating our Database

First, we are going to create our database.

Open phpMyAdmin.
Click databases, create a database and name it as angular.
After creating a database, click the SQL and paste the below codes.

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;

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 our index that contains out 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="https://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">&times;</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">&times;</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>

<!DOCTYPE html>

<head>

<title>AngularJS Adding Form Fields Dynamically with PHP/MySQLi</title>

</head>

<h1 class="page-header text-center">AngularJS Adding Form Fields Dynamically with PHP/MySQLi</h1>

<i class="fa fa-check"></i> {{ successMessage }}

</div>

<i class="fa fa-warning"></i> {{ errorMessage }}

</div>

</div>

</div>

</div>

</div>

</fieldset>

</form>

<thead>

<tr>

<th>First Name</th>

<th>Address</th>

</tr>

</thead>

<tbody>

<td>{{ member.firstname }}</td>

<td>{{ member.lastname }}</td>

<td>{{ member.address }}</td>

</tr>

</tbody>

</table>

</div>

</body>

</html>

Angular.js

This contains our 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;
    }
});

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 our PHP api/code that fetches data from our 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);
?>

<?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 our PHP api/code in adding one or multiple rows into our database.

<?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);
?>

<?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);

Adding Form Fields Dynamically with PHP/MySQLi in AngularJS

Creating our Database

Index.html

Angular.js

Fetch.php

Add.php

Download Code: Adding Form Fields Dynamically

Related Posts: