Add Input Fields To Form Dynamically Using jQuery

Introduction

This tutorial shows an example how to add input fields to form dynamically using jQuery. Input field types may be text, textarea or file to the form. I also have added remove button next to the added input field to remove the field if you think later that do not need it.

For this example, I have used here jQuery for dynamically adding inputs, CSS for some basic style and HTML code.

How does it work?

  1. I have included select/option for what type of input to be added to the form.
  2. I have included one <span/> tag with id=”addField” for triggering add functionality using jquery.
  3. Each dynamically added input field has exactly one <span/> tag for removing the added input field if not needed later.

Prerequisites

Knowledge of HTML, jQuery/JavaScript, CSS

Add Form Fields Dynamically

By default, I have kept already one input type=”text” field with label Name in the form.

This is an example which shows how to add fields to the form dynamically using jQuery and if you want you may customize as per your needs.

HTML Part

Here you see I have included select/option field for what type of input you want to add to the form. I have added <span/> tag with id=”addField” clicking on which adds the input to the form.

<div id="container">
	<h2>Add input fields to form dynamically using jQuery</h2>
	
	<form id="dynamic_inputs" method="post">            
		<p>
			<select name="input_type" id="input_type">
				<option value="">-- Select Type --</option>
				<option value="1">Text</option>
				<option value="2">Textarea</option>
				<option value="3">File</option>
			</select>
			<span id="addField">Add Field</span>
		</p>
		<p>
			<label for="name">Name: </label>
			<input id="name" type="text" name="name">
		</p>
	</form>
</div>

CSS Part

We have some css code for applying basic style to the form.

#container{
	width:600px;
	margin:20px auto;
	padding:15px;
	background-color:#eee;
}
#addField{
	padding:5px;
	display:inline-block;
	background-color:#3A9668;
	color:#f1f1f1;
	border:1px solid #005;
}
.removeField{
	margin:auto;
	margin-left:5px;
	padding:5px;
	display:inline-block;
	background-color:#B02109;
	color:#f1f1f1;
	border:1px solid #005;
}
#addField:hover, .removeField:hover{
	cursor: pointer;
}
label{
	padding:0 10px;
	display:block;
	float:left;    
	width:150px;
}
input, textarea{
	padding:5px;
	font-size: 14px;
}
input {
	width: 250px;
}
textarea{
	width:290px;
	height:150px;
}
select {
	padding:5px;
}
.btn-submit {
	width: 100px;
	background-color:#428BCA;
	border-color:#357EBD;
}

jQuery Part

We have finally jquery for adding inputs to the form by triggering JavaScript events. Based on input type I am adding input field and attaching Remove button to each input field.

$(document).ready(function(){            
	var $fieldCount = 0;
	$('#addField').on('click', function(){
		$(".error").remove();
		$(".values").remove();
		if($("#input_type").val()!=""){
			var $type = $("#input_type").val();
			$fieldCount++;;
			if($type == 1) {
				var $node = '<p><label for="text'+$fieldCount+'">Text '+$fieldCount+': </label><input type="text" name="text'+$fieldCount+'" id="text'+$fieldCount+'"/><span class="removeField">Remove</span></p>';
			} else if($type == 2) {
				var $node = '<p><label for="textarea'+$fieldCount+'">Textarea '+$fieldCount+': </label><textarea name="textarea'+$fieldCount+'" id="textarea'+$fieldCount+'"></textarea><span class="removeField">Remove</span></p>';
			} else if($type == 3) {
				var $node = '<p><label for="file'+$fieldCount+'">File '+$fieldCount+': </label><input type="file" name="file'+$fieldCount+'" id="file'+$fieldCount+'"/><span class="removeField">Remove</span></p>';
			}
			$('p').last().after($node);
		} else {
			$error_msg = "<p style='color:red;' class='error'>Select input type<p>";
			$('form').prepend($error_msg);
		}
	});
	
	$('form').on('click', '.removeField', function(){
		$(this).parent().remove();
	});            
});

Testing Dynamic Input Fields

Here is the output when you run the HTML file. The form has a default text input field with label Name.

jquery form dynamic input

Choose select field what type of input field you want to add to the form:

jquery dynamic input fields

You can add as many input fields as you wish. You can also delete them by using Remove button if you do not want later.

jquery dynamic inputs

Hope you got an idea how to add dynamic input fields to HTML form using jQuery.

Source Code

Download

Leave a Reply

Your email address will not be published.