Add Remove Input Fields Dynamically Using jQuery

Add Remove Input Fields Dynamically Using jQuery

by
Reading Time: 6 minutes
10,902 Views

In admin panels sometime we want dynamically generated HTML input options to put extra data. Inside this article we will see such type of concept i.e Add Remove input fields dynamically using jQuery.

There will be simple jquery code where we will trigger some events listener and manage the functionality. We will use some chaining methods of jquery as well which interact with DOM of HTML.

So inside this we will cover the following functionalities to add more fields dynamically using jQuery and access values via PHP.

  1. Add Remove Dynamically input fields using jQuery.
  2. Get input values value using PHP.

Let’s get started.

Creating a HTML Layout with Wrapper

<form class="form-inline" id="frm-add-data" action="javascript:void(0)">
       <div class="field_wrapper">
			<div>
				<div class="form-group">
					<label for="product_name">Product Name:</label>
					<input type="text" class="form-control" id="product_name" placeholder="Enter name"
							name="product_name[]">
				</div>
				<div class="form-group">
					<label for="amount">Amount:</label>
					<input type="number" class="form-control" id="amount" placeholder="Enter amount"
							name="amount[]">
				</div>
				<div class="form-group">
					<a href="javascript:void(0);" class="add_button" title="Add field">+ Add More</a>
				</div>
			</div>
		</div>
</form>
  • Inside this above code we can see we have a div with class field_wrapper.
  • We have a button with id add_button. We will add a onclick event on this which will add dynamic html input fields inside given wrapper div.
  • Input fields which is submitting in bulk to server or we may say contain multiple values, make it name attributes as in format of an array name=”product_name[]”

Adding jQuery Events on Selectors

<script type="text/javascript">

		$(document).ready(function () {

			var maxField = 5; // Total 5 product fields we add

			var addButton = $('.add_button'); // Add more button selector

			var wrapper = $('.field_wrapper'); // Input fields wrapper

			var fieldHTML = `<div class="form-elements">
					<div class="form-group">
							<label for="product_name">Product Name:</label>
					<input type="text" class="form-control" id="product_name" placeholder="Enter name" name="product_name[]">
					</div>
					<div class="form-group">
					<label for="amount">Amount:</label>
					<input type="number" class="form-control" id="amount" placeholder="Enter amount" name="amount[]">
					</div>
					<div class="form-group">
					<a href="javascript:void(0);" class="remove_button" title="Add field">Remove</a>
					</div>
				</div>`; //New input field html 

			var x = 1; //Initial field counter is 1

			$(addButton).click(function () {
				//Check maximum number of input fields
				if (x < maxField) {
					x++; //Increment field counter
					$(wrapper).append(fieldHTML);
				}
			});

			//Once remove button is clicked
			$(wrapper).on('click', '.remove_button', function (e) {
				e.preventDefault();
				$(this).parent().closest(".form-elements").remove();
				x--; //Decrement field counter
			});
		});
</script>
  • Events are attached with add_button selector.
  • When we are generating dynamic HTML input fields we are also creating a remove button with selector remove_button.
  • Click event is attached with that class.
  • We can see we are appending dynamic HTML into div wrapper

Complete Code Add Remove Dynamic Inputs Using jQuery

<!DOCTYPE html>
<html lang="en">

<head>
	<title>Add Remove Input Fields Dynamically Using jQuery</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
	<style type="text/css">
		.form-elements {
			margin-top: 10px;
		}

		#frm-add-data .form-group {
			margin-left: 13px;
		}
	</style>
</head>

<body>

	<div class="container">
		<h2>Add Remove Input Fields Dynamically Using jQuery</h2>

		<form class="form-inline" id="frm-add-data" action="javascript:void(0)">

			<div class="field_wrapper">
				<div>
					<div class="form-group">
						<label for="product_name">Product Name:</label>
						<input type="text" class="form-control" placeholder="Enter name"
							name="product_name[]">
					</div>
					<div class="form-group">
						<label for="amount">Amount:</label>
						<input type="number" class="form-control" placeholder="Enter amount"
							name="amount[]">
					</div>
					<div class="form-group">
						<a href="javascript:void(0);" class="add_button" title="Add field">+ Add More</a>
					</div>
				</div>
			</div>

		</form>
	</div>

	<script type="text/javascript">

		$(document).ready(function () {

			var maxField = 5; // Total 5 product fields we add

			var addButton = $('.add_button'); // Add more button selector

			var wrapper = $('.field_wrapper'); // Input fields wrapper

			var fieldHTML = `<div class="form-elements">
					<div class="form-group">
							<label for="product_name">Product Name:</label>
					<input type="text" class="form-control" placeholder="Enter name" name="product_name[]">
					</div>
					<div class="form-group">
					<label for="amount">Amount:</label>
					<input type="number" class="form-control" placeholder="Enter amount" name="amount[]">
					</div>
					<div class="form-group">
					<a href="javascript:void(0);" class="remove_button" title="Add field">Remove</a>
					</div>
				</div>`; //New input field html 

			var x = 1; //Initial field counter is 1

			$(addButton).click(function () {
				//Check maximum number of input fields
				if (x < maxField) {
					x++; //Increment field counter
					$(wrapper).append(fieldHTML);
				}
			});

			//Once remove button is clicked
			$(wrapper).on('click', '.remove_button', function (e) {
				e.preventDefault();
				$(this).parent().closest(".form-elements").remove();
				x--; //Decrement field counter
			});
		});
	</script>

</body>

</html>

Get Multiple Values in PHP

Once the form with multiple input values will be submitted, the values can be retrieved in PHP as $_POST[‘variable_name’]

# Get Product names
$product_names_array = $_POST['product_name'];

print_r($product_names_array);

# Get Product amounts
$amount_array = $_POST['amount'];

print_r($amount_array);

We hope this article helped you to learn about Add Remove Input Fields Dynamically Using jQuery in a very detailed way.

Online Web Tutor invites you to try Skillshike! Learn CakePHP, Laravel, CodeIgniter, Node Js, MySQL, Authentication, RESTful Web Services, etc into a depth level. Master the Coding Skills to Become an Expert in PHP Web Development. So, Search your favourite course and enroll now.

If you liked this article, then please subscribe to our YouTube Channel for PHP & it’s framework, WordPress, Node Js video tutorials. You can also find us on Twitter and Facebook.