add remove input fields dynamically with jquery and submit to database

add remove input fields dynamically with jquery and submit to database. Steps to add or remove input fields dynamically, Create Database Table, Create index.php File and Create do_submit.php File.

add remove input fields dynamically with jquery and submit to database

Dynamically Add Remove input fields using JQuery Ajax Example with demo. The example code displays how to generate input fields on the fly in a form as well as submit the HTML input field’s value into the mysql database.

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

Step 1: Create Database Table

CREATE TABLE IF NOT EXISTS `category` (
  `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: Create index.php File

index.php

<!DOCTYPE html>
<html>
<head>
    <title>PHP - Dynamically Add or Remove input fields using JQuery - www.pakainfo.com</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>


<div class="container">
    <h2 align="center">PHP - Dynamically Add or Remove input fields using JQuery - www.pakainfo.com</h2>  
    <div class="form-group">
         <form name="cat_name" id="cat_name">


            <div class="table-responsive">  
                <table class="table table-bordered" id="livemode_field">  
                    <tr>  
                        <td><input type="text" name="name[]" placeholder="Enter your Name" class="form-control name_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-info" value="Submit" />  
            </div>


         </form>  
    </div> 
</div>


<script type="text/javascript">
    $(document).ready(function(){      
      var postURL = "/do_submit.php";
      var i=1;  


      $('#add').click(function(){  
           i++;  
           $('#livemode_field').append('<tr id="row'+i+'" class="livemode-added"><td><input type="text" name="name[]" placeholder="Enter your Name" class="form-control name_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();  
      });  


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


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

Step 3: Create do_submit.php File

do_submit.php

<?php

	define (DB_USER, "root");
	define (DB_PASSWORD, "DSf89745f");
	define (DB_DATABASE, "category_list");
	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 category(name) VALUES ('".$value."')";
			$mysqli->query($sql);
		}
		echo json_encode(['success'=>'Categories Inserted successfully.']);
	}
?>

Dynamically add multiple input fields and submit to database with jquery and laravel

I hope you get an idea about add remove input fields dynamically with jquery and submit to database.
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.