In this post We would like to share you How can we implement add more and remove dynamic textbox or input fields by using AngularJS with PHP language. By using this sourcecode anybody can adding or removing form fields dynamically and after this save or insert that fields data into Mysql database by using PHP script. If you have not know How to dynamically add or remove HTML input fields by using Angular javascript then this tutorial is for you in which we have describe step by step How to use AngularJS code for make form with add or remove dynamic HTML input fields and after this we have describe how to save dynamic fields data by using PHP PDO.
If in our web project which we have build with AngularJS as frontend and in backend we have use PHP and in that we want to required add dynamic input fields then you have come on right place. Under this tutorial you can find full source code for add or remove input fields dynamically by using AngularJS and by using PHP with AngularJS we have insert that dynamic input fields data into mysql database. In this tutorial we have make following files.
- index.html
- database_connection.php
- fetch_data.php
- insert.php
So if you want to learn how to add or remove input fields dynamically in AngularJS with PHP. So you have to just follow this tutorial step by step.
index.php
First we have create simple index.html file in which we have already include bootstrap and AngularJS library. In this file we have write html code for display alert message by using bootstrap, create form with add or remove dynamic input fields and below form we have make on table for display inserted data. In this file we have also write Angular javascript code for fetch data from mysql table, add one more input fields, remove input fields and lastly we have make function for submit form data PHP script.
<!DOCTYPE html>
<html>
<head>
<title>AngularJS | Add Remove Input Fields Dynamically in PHP</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>
<br />
<h3 align="center">AngularJS | Add Remove Input Fields Dynamically in PHP</h3>
<br />
<div ng-app="dynamicApp" ng-controller="dynamicController" class="container" style="width:600px;" 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="name" id="name" ng-model="formData.person_name" class="form-control" />
</div>
<fieldset ng-repeat="row in rows">
<div class="form-group">
<label>Enter Your Programming Skill</label>
<div class="row">
<div class="col-md-9">
<input type="text" name="programming_languages[]" 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>Name</th>
<th>Programming Languages</th>
</tr>
<tr ng-repeat="name in namesData">
<td>{{name.name}}</td>
<td>{{name.programming_languages}}</td>
</tr>
</table>
</div>
</div>
</body>
</html>
<script>
var app = angular.module('dynamicApp', []);
app.controller('dynamicController', function($scope, $http){
$scope.success = false;
$scope.error = false;
$scope.fetchData = function(){
$http.get('fetch_data.php').success(function(data){
$scope.namesData = data;
});
};
$scope.rows = [{name: 'programming_languages[]', name: '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.submitForm = function(){
$http({
method:"POST",
url:"insert.php",
data:$scope.formData
}).success(function(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.rows = [{name: 'programming_languages[]', name: 'remove'}];
$scope.fetchData();
}
});
};
});
</script>
fetch_data.php
After this we have make this file and it will fetch data from mysql database and send to angular javascript function.
<?php
//fetch_data.php
include('database_connection.php');
$query = "SELECT * FROM tbl_name 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
This last file of this tutorial and under this file we have write PHP code for save or insert data into mysql database by using PHP with AngularJS.
<?php
//insert.php
include('database_connection.php');
$form_data = json_decode(file_get_contents("php://input"));
$error = '';
$message = '';
$validation_error = '';
$name = '';
$programming_languages = '';
if(empty($form_data->person_name))
{
$error[] = 'Name is Required';
}
else
{
$name = $form_data->person_name;
}
if(empty($form_data->skill))
{
$error[] = 'Programming Language is Required';
}
else
{
foreach($form_data->skill as $language)
{
$programming_languages .= $language . ', ';
}
$programming_languages = substr($programming_languages, 0, -2);
}
$data = array(
':name' => $name,
':programming_languages' => $programming_languages
);
if(empty($error))
{
$query = "
INSERT INTO tbl_name
(name, programming_languages) VALUES
(:name, :programming_languages)
";
$statement = $connect->prepare($query);
if($statement->execute($data))
{
$message = 'Data Inserted';
}
}
else
{
$validation_error = implode(", ", $error);
}
$output = array(
'error' => $validation_error,
'message' => $message
);
echo json_encode($output);
?>
Thank you.
ReplyDeleteHello Webslesson!
ReplyDeleteI have a problem want to ask you.
I have two tables are:
1. tbl_po_master(pm_id,po_number,supplier,po_date)
2. tbl_po_detail(pd_id,pm_id,product_item,qty,unit_price)
On the form I have fields:
For the master table: po_number,supplier and po_date only 1 row for inserting to tbl_po_master table.
For the detail table: product_item,qty and unit_price these fields are dynamic for inserting to tbl_po_detail table. For the column "pm_id" is automatically select from tbl_po_master table and inert into tbl_po_detail table.
Please create a video related to this problem. Thank you in advance!
your link is not accessible even with a valid gmail account. Please make databaseconnection.php available on site
ReplyDeleteits just a simple pdo db connection, if you cannot code then google it.
Deletethanks alot, saved my soul
ReplyDelete