Today, We want to share with you dynamically add multiple input fields and submit to database with jquery and php.In this post we will show you add remove multiple input fields dynamically with bootstrap, hear for Create Database and Table we will give you demo and example for implement.In this post, we will learn about dynamically add remove input fields in php with jquery ajax with an example.

PHP – Dynamically Add Remove input fields using JQuery Ajax Example with Demo

Contents

SQL Query:

--
-- Database: `product_list`

-- Table structure for table `members`
--

CREATE TABLE `members` (
  `id` int(11) NOT NULL,
  `name` varchar(50) NOT NULL,
  `email` varchar(50) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

--
-- Dumping data for table `members`
--

INSERT INTO `members` (`id`, `first_name`, `email`) VALUES
(1, 'ayushi', '[email protected]_name.com'),
(2, 'mayur Dhameliya', '[email protected]_name.com'),
(3, 'krishna', '[email protected]_name.com'),
(4, 'bhavik', '[email protected]_name.com'),
(5, 'sejal', '[email protected]_name.com');

Create Database connection with MySQL

config.php

<?php
	// Database configuration 
	$hostname = "localhost"; 
	$username = "application_v1"; 
	$password = ""; 
	$dbname   = "product_list"; 
	 
	// Make database connection 
	$conn = mysqli_connect($hostname, $username, $password, $dbname); 
	 
	// Check DB connection
	if(mysqli_connect_errno()) {
	  echo "Failed to connect to MySQL: " . mysqli_connect_error();
	  exit();
	}

?>

Make HTML File index page, jQuery & AJAX code

index.php

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Dynamic add/remove input fields in PHP Jquery AJAX - www.pakainfo.com</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>

<div class="card text-center" style="margin-bottom:50px;">
  <h1>Dynamic Add/Remove input fields in PHP Jquery AJAX</h1>
</div>
  
<div class="container">
  <div class="row">
    <div class="col-md-1"></div>
      <div class="col-md-10">
        <div class="form-group">
          <form name="member_nm" id="member_nm">
            <table class="table table-bordered table-hover" id="addmore_row">
              <tr>
                <td><input type="text" name="first_name[]" placeholder="Enter your Member Name" class="form-control member_list" /></td>
                <td><input type="text" name="email[]" placeholder="Enter your Member Email" class="form-control name_email"/></td>
                <td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>  
              </tr>
            </table>
            <input type="submit" class="btn btn-success" name="submit" id="submit" value="Submit">
          </form>
        </div>
      </div>
    <div class="col-md-1"></div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

<script type="text/javascript">
  $(document).ready(function(){

    var i = 1;

    $("#add").click(function(){
      i++;
      $('#addmore_row').append('<tr id="row'+i+'"><td><input type="text" name="first_name[]" placeholder="Enter your Name" class="form-control member_list"/></td><td><input type="text" name="email[]" placeholder="Enter your Email" class="form-control name_email"/></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();  
    });

    $("#submit").on('click',function(){
      var formdata = $("#member_nm").serialize();
      $.ajax({
        url   :"action.php",
        type  :"POST",
        data  :formdata,
        cache :false,
        success:function(result){
          alert(result);
          $("#member_nm")[0].reset();
        }
      });
    });
  });
</script>

Make a PHP code file

action.php

<?php

	include_once('config.php');

	$memberData = count($_POST["first_name"]);
	
	if ($memberData > 0) {
	    for ($i=0; $i < $memberData; $i++) { 
		if (trim($_POST['first_name'] != '') && trim($_POST['email'] != '')) {
			$first_name   = $_POST["first_name"][$i];
			$email  = $_POST["email"][$i];
			$query  = "INSERT INTO members (first_name,email) VALUES ('$first_name','$email')";
			$result = mysqli_query($con, $query);
		}
	    }
	    echo "Member Data inserted successfully";
	}else{
	    echo "Please Enter member first_name";
	}

?>

I hope you get an idea about add/remove multiple input fields dynamically with jquery with validation.
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.

PHP – Dynamically Add Remove input fields using JQuery Ajax Example with Demo

Create Database connection with MySQL

Make HTML File index page, jQuery & AJAX code

Make a PHP code file

Related posts: