article

Friday, November 19, 2021

AngularJS Dynamic Add Remove Input Fields with PHP and Mysql

AngularJS Dynamic Add Remove Input Fields with PHP and Mysql

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
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
//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
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
//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
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
//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
?
1
2
3
4
//dbcon.php
<?php
$connect = new PDO("mysql:host=localhost;dbname=testingdb", "root", "");
?>

Posted by ednalan at 7:04 PM . Under .

Related Post