How To Add And Remove Input Fields In PHP

Hello Guys this tutorial is all about How to Add and Remove Input Fields in PHP

In this Tutorial, you will learn how to add and remove input fields dynamically using jQuery and store in database.

In this tutorial you will see how to handle dynamically added fields value save in mysql database using PHP Bootstrap. Let’s get started:

Create a database table and import the tbl_name.sql
Create Put this code in index.php

<html>
	<head>
		<title>How to Add and Remove Input Fields in PHP</title>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
		https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js
		https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js
	</head>
	<body>
		
			

			

			How to Add and Remove Input Fields in PHP


			
				
					
						
							
								
								
							
						
						
					
				</form>
			</div>
		</div>
	</body>
</html>


$(document).ready(function(){
	var i=1;
	$('#add').click(function(){
		i++;
		$('#dynamic_field').append('');
	});
	
	$(document).on('click', '.btn_remove', function(){
		var button_id = $(this).attr("id"); 
		$('#row'+button_id+'').remove();
	});
	
	$('#submit').click(function(){		
		$.ajax({
			url:"name.php",
			method:"POST",
			data:$('#add_name').serialize(),
			success:function(data)
			{
				alert(data);
				$('#add_name')[0].reset();
			}
		});
	});
	
});

3. Creat and Add this code in name.php

 <?php  
 $connect = mysqli_connect("localhost", "root", "", "test_db");  
 $number = count($_POST["name"]);  
 if($number > 0)  
 {  
      for($i=0; $i<$number; $i++)  
      {  
           if(trim($_POST["name"][$i] != ''))  
           {  
                $sql = "INSERT INTO tbl_name(name) VALUES('".mysqli_real_escape_string($connect, $_POST["name"][$i])."')";  
                mysqli_query($connect, $sql);  
           }  
      }  
      echo "Data Inserted";  
 }  
 else  
 {  
      echo "Please Enter Name";  
 }  
 ?>