Introduction

This tutorial shows an example how to add input fields to form dynamically using jQuery. Input types may be text, textarea or file to the form. 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. We have select/option for what type of input to be added to the form.
  2. We have 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.

Final Results

You will see final outputs on the browser similar to the below images:

add input fields to form dynamically jquery
add input fields to form dynamically jquery

Example with Code

By default, we have already one input type=”text” field 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. If you need any help you can leave a comment.

HTML Part

Here you see we have select/option field for what type of input you want to add to the form. We have <span/> tag with id=”addField” clicking on which adds the input to the form. We have already default input field in 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.

$(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+'"/><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();
	});            
});

Source Code

You can download source code.

Thanks for reading.

Tags:

Leave a Reply

Your email address will not be published. Required fields are marked *