AngularJS Adding Form Fields Dynamically with PHP MySQLi

AngularJS Adding Form Fields Dynamically with PHP MySQLi

In this Post We Will Explain About is AngularJS Adding Form Fields Dynamically with PHP MySQLi With Example and Demo.Welcome on Live24u.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Add Remove input fields dynamically using php with MySQLi Example

In this post we will show you Best way to implement jQuery Add & Remove Dynamically Input Fields in PHP MySQLi, hear for PHP – Dynamically Add Remove input fields using PHP MySQLi Example with Demo with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.




Creating simple Database

I am gonna to make simple database.
1. First of all the Open simple xampp or wampp server with phpMyAdmin.
2. Trigger select you Database, make a database and name it as mylive24u.
3. And then making a mysql database, trigger the MY SQL and simple Copy and paste the below scripts.

Also Read :   Laravel JQuery AJAX Pagination Step By step

CREATE TABLE `students` (
  `studid` int(11) NOT NULL AUTO_INCREMENT,
  `studfname` varchar(30) NOT NULL,
  `studlname` varchar(30) NOT NULL,
  `studaddress` text NOT NULL,
PRIMARY KEY(`studid`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

index.html

And then, It is simple Main page index.html that Data contains output results HTML add form.

<!DOCTYPE html>
<html lang="en" ng-app="liveApp">
<head>
<meta charset="utf-8">
<title>Simple AngularJS Adding HTML Form Fields Dynamically with PHP and MySQLi</title>
<!-- bootstrap.min.css -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="nofollow">

<!-- angular.min.js -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>
<body ng-controller="studentData" ng-init="retrive()">
<div class="live container">
    <h1 class="live page-header text-left">Simple AngularJS Adding HTML Form Fields Dynamically with PHP and MySQLi</h1>
    <div class="live row">
		<div class="live col-md-8 col-md-offset-2">
			<div class="live alert alert-success text-left" ng-show="success">
				<button type="button" class="close" ng-click="msgCls()"><span aria-hidden="true">×</span></button>
				<i class="fa fa-check"></i> {{ messageSuccess }}
			</div>
			<div class="alert alert-danger text-left" ng-show="error">
				<button type="button" class="close" ng-click="msgCls()"><span aria-hidden="true">×</span></button>
				<i class="live fa fa-warning"></i> {{ msgError }}
			</div>
			<form name="liveForm" novalidate>
				<fieldset ng-repeat="studentfield in studentList">
					<div class="live panel panel-default">
						<div class="panel-body">
							<div class="row">
								<div class="col-md-3">
									<input type="text" placeholder="Student Firstname" class="live form-control" ng-model="studentfield.studfname" required>
								</div>
								<div class="col-md-3">
									<input type="text" placeholder="Student Lastname" class="live form-control" ng-model="studentfield.studlname" required>
								</div>
								<div class="col-md-5">
									<input type="text" placeholder="Student Address" class="live form-control" ng-model="studentfield.studaddress" required>
								</div>
								<button class="live btn btn-danger btn-sm" ng-show="$last" ng-click="deleteField()"><span class="live glyphicon glyphicon-remove"></span></button>
							</div>
						</div>
					</div>
				</fieldset>
				<button type="button" class="live btn btn-success" ng-click="addFields()"><span class="live glyphicon glyphicon-plus"></span> Add</button>
				<button type="button" class="btn btn-success" ng-disabled="liveForm.$invalid" ng-click="liveFormSubmit()"><span class="glyphicon glyphicon-floppy-disk"></span> Save</button>
			</form>
			<table class="table table-bordered live24u" style="margin-top:11px;">
				<thead>
                    <tr>
                        <th>Student First Name</th>
                        <th>Last Name</th>
                        <th>Address</th>
                    </tr>
                </thead>
				<tbody>
					<tr ng-repeat="stud in students">
						<td>{{ stud.studfname }}</td>
						<td>{{ stud.studlname }}</td>
						<td>{{ stud.studaddress }}</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</div>
<script src="main.js"></script>
</body>
</html>

main.js

It data contains simple main.js scripts.

Also Read :   Angularjs Reload data - update value without page refresh using Angularjs

var liveApp = angular.module('liveApp', []);
liveApp.controller('studentData', function($scope, $http){
	$scope.success = false;
    $scope.error = false;
 
    $scope.retrive = function(){
    	$http.get("do_fetch.php").success(function(data){ 
	        $scope.students = data; 
	    });
    }
 
    $scope.studentList = [{id: 'firstField'}];
 
    $scope.addFields = function(){
        var addnewStudent = $scope.studentList.length+1;
        $scope.studentList.push({'id':'field'+addnewStudent});
    }
 
    $scope.liveFormSubmit = function(){
        $http.post('do_add.php', $scope.studentList)
        .success(function(data){
            if(data.error){
                $scope.error = true;
                $scope.success = false;
                $scope.msgError = data.comments;
            }
            else{
                $scope.error = false;
                $scope.success = true;
                $scope.messageSuccess = data.comments;
                $scope.retrive();
                $scope.studentList = [{id: 'firstField'}];
            }
        });
    }
 
    $scope.deleteField = function() {
        var itemLast = $scope.studentList.length-1;
        $scope.studentList.splice(itemLast);
    };
 
    $scope.msgCls = function(){
    	$scope.success = false;
    	$scope.error = false;
    }
});

do_fetch.php

It is simple PHP api/code that Retriving data from simple MySQL phpMyAdmin database.

<?php
	$db_con = new mysqli('localhost', 'YOUR_USER_NAME', 'YOUR_PASSWORD', 'live24u');
 
	$lstoutput = array();
	$msqsql = "SELECT * FROM students";
	$sqlquery=$db_con->query($msqsql);
	while($row=$sqlquery->fetch_array()){
		$lstoutput[] = $row;
	}
 
	echo json_encode($lstoutput);
?>

do_add.php

Last Steps, It is simple PHP api/code in adding here one or more just multiple Data rows into simple mysql database.

Also Read :   Escrow with Paypal Payments Pro API Integration Using PHP

<?php
    $db_con = new mysqli('localhost', 'YOUR_USER_NAME', 'YOUR_PASSWORD', 'live24u');
 
    $alldata = json_decode(file_get_contents("php://input"));
 
    $count = count($alldata);
 
    $output_res = array('error' => false);
 
    foreach($alldata as $key => $value){
        $studfname = $value->studfname;
        $studlname = $value->studlname;
        $studaddress = $value->studaddress;
 
        $msqsql = "INSERT INTO students (studfname, studlname, studaddress) VALUES ('$studfname', '$studlname', '$studaddress')";
        $mtquery = $db_con->query($msqsql);
    }
 
    if($mtquery){
        $output_res['comments'] = "($count) Student/s added successfully";
    }
    else{
        $output_res['error'] = true;
        $output_res['comments'] = "Cannot add Student(s)";
    }
 
    echo json_encode($output_res);
?>

You are Most welcome in my youtube Channel Please subscribe my channel. and give me FeedBack.
More Details……
Angularjs Example





Example

I hope you have Got What is dynamically add input fields and submit to database with php and MySQLi And how it works.I would Like to have FeedBack From My Blog(live24u.com) readers.Your Valuable FeedBack,Any Question,or any Comments about This Article(live24u.com) Are Most Always Welcome.