AngularJS Adding Form Fields Dynamically With PHP MySQLi

AngularJS Adding Form Fields Dynamically with PHP MySQLi

Contents

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.





Simple AngularJS Adding HTML Form Fields Dynamically with PHP and MySQLi








    Simple AngularJS Adding HTML Form Fields Dynamically with PHP and MySQLi
    
		
			
				
				 {{ messageSuccess }}
			
			
				
				 {{ msgError }}
			
			
				
					
						
							
								
									
								
								
									
								
								
									
								
								
							
						
					
				
				
				
			
			
				
                    
                        Student First Name
                        Last Name
                        Address
                    
                
				
					
						{{ stud.studfname }}
						{{ stud.studlname }}
						{{ stud.studaddress }}

Student First Name	Last Name	Address
{{ stud.studfname }}	{{ stud.studlname }}	{{ stud.studaddress }}

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.