Today, We want to share with you JQuery Ajax Add Remove Input Fields Dynamically using PHP.
In this post we will show you Add Remove Input Fields Dynamically, hear for PHP – Dynamically Add Remove input fields using JQuery Ajax Example with Demo we will give you demo and example for implement.In this post, we will learn about add/remove multiple input fields dynamically with jquery with an example.

JQuery Ajax Add Remove Input Fields Dynamically using PHP

In fist step for PHP – Add Remove Input Fields Dynamically using JQuery Ajax, I need to make simply database as well as table, Therefor here We make a new mysql “atmiya25” database and “students” table for this database with simply created id and name column. We can simply make “students” table as following simple sql query run.

READ :  Apache Exclude Directory Limit Directive using htaccess

Step 1: Create Database Table

SQL Query:

CREATE TABLE IF NOT EXISTS `students` (
  `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
  `name` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci AUTO_INCREMENT=24 ;

Step 2: Make index.php File

simple create a index.php file.

<!DOCTYPE html>
<html>
<head>
    <title>JQuery Ajax Add Remove Input Fields Dynamically using PHP - infinityknow.com</title>
    <link rel="stylesheet" href="3.3.6/css/bootstrap.min.css" />  
    <script src="jquery/1.12.4/jquery.min.js"></script>
    <script src="3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <h2 align="center">JQuery Ajax Add Remove Input Fields Dynamically using PHP - infinityknow.com</h2>  
    <div class="form-group">
         <form name="student_name" id="student_name">
            <div class="table-responsive">  
                <table class="table table-bordered gid" id="my_temp_field">  
                    <tr>  
                        <td><input type="text" name="name[]" placeholder="Enter Student Name" class="form-control student_list" required="" /></td>  
                        <td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>  
                    </tr>  
                </table>  
                <input type="button" name="submit" id="submit" class="btn btn-success" value="Submit" />  
            </div>
         </form>  
    </div> 
</div>
<script type="text/javascript">
    $(document).ready(function(){      
      var postURL = "/addRemove.php";
      var i=1;  
      $('#add').click(function(){  
           i++;  
           $('#my_temp_field').append('<tr id="row'+i+'" class="dynamic-added"><td><input type="text" name="name[]" placeholder="Enter Student Name" class="form-control student_list" required /></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');  
      });


      $(document).on('click', '.btn_remove', function(){  
           var button_id = $(this).attr("id");   
           $('#row'+button_id+'').remove();  
      });  

		//Ajax Call
      $('#submit').click(function(){            
           $.ajax({  
                url:postURL,  
                method:"POST",  
                data:$('#student_name').serialize(),
                type:'json',
                success:function(data)  
                {
                  	i=1;
                  	$('.dynamic-added').remove();
                  	$('#student_name')[0].reset();
    				        alert('Your Record Inserted Successfully.');
                }  
           });  
      });


    });  
</script>
</body>
</html>

Step 3: Create addRemove.php File

addRemove.php

READ :  AngularJS SEO - Single Page App Crawling and Indexing

<?php

	define (DB_USER, "root");
	define (DB_PASSWORD, "[email protected]");
	define (DB_DATABASE, "atmiya25");
	define (DB_HOST, "localhost");
	$mysqli = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, DB_DATABASE);
	if(!empty($_POST["name"])){


		foreach ($_POST["name"] as $key => $value) {
			$sql = "INSERT INTO students(name) VALUES ('".$value."')";
			$mysqli->query($sql);
		}
		echo json_encode(['success'=>'All student Names Inserted successfully.']);
	}
?>

jQuery 15 Powerful Tips and Tricks for Developers and Web Designer

Read More :

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about PHP – Dynamically Add Remove input fields using JQuery Ajax Example with Demo.
I would like to have feedback on my Infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

READ :  Laravel Add Remove input fields Dynamically using jQuery