JQuery Ajax Add Remove Input Fields Dynamically using PHP

JQuery Ajax Add Remove Input Fields Dynamically

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 :  vuejs datatable example - Datatable component using Vuejs-vuejs datatable

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.

E-junkie: Sell digital downloads online

E-junkie Provides a Copy-paste buy-now, and cart buttons for selling downloads, codes and tangible products on any website, blog, social media, email and messenger!

Also see:

  1. The Top 10+ Best Webinar Software Platforms For 2020-2021
  2. Build Your Future Godaddy Careers And Jobs
  3. Introduction To Web Hosting Services

<!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 Events Directives With Example

<?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 :  Angular ng blur Event Example