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 Pakainfo.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.

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.

<title>Simple AngularJS Adding HTML Form Fields Dynamically with PHP and MySQLi</title>
<!-- bootstrap.min.css -->


<!-- angular.min.js -->



<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">
				<button type="button" class="close"><span>×</span></button>
				<i class="fa fa-check"></i> {{ messageSuccess }}
			</div>
			<div class="alert alert-danger text-left">
				<button type="button" class="close"><span>×</span></button>
				<i class="live fa fa-warning"></i> {{ msgError }}
			</div>
			<form name="liveForm">
				<fieldset>
					<div class="live panel panel-default">
						<div class="panel-body">
							<div class="row">
								<div class="col-md-3">
									
								</div>
								<div class="col-md-3">
									
								</div>
								<div class="col-md-5">
									
								</div>
								<button class="live btn btn-danger btn-sm"><span class="live glyphicon glyphicon-remove"></span></button>
							</div>
						</div>
					</div>
				</fieldset>
				<button type="button" class="live btn btn-success"><span class="live glyphicon glyphicon-plus"></span> Add</button>
				<button type="button" class="btn btn-success"><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>
						<td>{{ stud.studfname }}</td>
						<td>{{ stud.studlname }}</td>
						<td>{{ stud.studaddress }}</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</div>

main.js

It data contains simple main.js scripts.

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.

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.

 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(Pakainfo.com) readers.Your Valuable FeedBack,Any Question,or any Comments about This Article(Pakainfo.com) Are Most Always Welcome.