Posted inTechnology / Ajax / AngularJS / Mysql / Mysqli / php / Programming

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.





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 }}

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.

I am Jaydeep Gondaliya , a software engineer, the founder and the person running Pakainfo. I'm a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, JavaScript, jQuery, Laravel, CodeIgniter, VueJS, AngularJS and Bootstrap from the early stage.

Leave a Reply

Your email address will not be published. Required fields are marked *

We accept paid guest Posting on our Site : Guest Post Chat with Us On Skype