Are you looking for adding more field dynamically in you form element ? if yes then see below description which describe to Add remove more field dynamically in JavaScript. So I have posted this post with simple JavaScript because it is good practice to do JavaScript which do not require any plugin so there is no problem of conflicting .You can use jQuery or any-other but You have to add plugin then check whether any other plugin is there or not so I guess to do with simple JavaScript is the best.So for that reason I made this example with only simple JavaScript means I can run my requirement anywhere I want.The dynamic form builder which will help you create more field dynamically.You can add and remove your field in html form.

Add remove more field dynamically.The dynamic form builder which will help you create more field dynamically.You can add and remove your field in html form.
Add remove more field dynamically in html form by java-script

So here I have shown that you can only add more and more field by clicking a button dynamically.In my example you can see a button called “click to add button” which create a click event if you click on that and then on that basis I have done some code which will create more and more filed on basis of click so let us what are those code.

So the below JavaScript code which get called after clicking on the button and Add remove more field dynamically.

<script>
	fields = 0;

	function addButton() {
		if (fields < 10) {
			var id = "file" + fields;
			document.getElementById('text').innerHTML +=
				"<div>Field: "+fields+"<input type='file' name='file_"+id+"' />"+
				"<a href='#' onclick='removeBuuton(this.parentNode)'></a>remove";
			fields += 1;
		} else {
			document.getElementById('warning').innerHTML = "Only 10 upload fields allowed.";
			document.form.add.disabled = true;
		}
	}

	function removeBuuton(element) {
		if (fields > 0) {
			document.getElementById('warning').innerHTML = "";
			var parent = document.getElementById('text');
			parent.removeChild(element);
			fields -= 1;
		}
	}

</script>

Please check the whole code of adding more field dynamically.

<!DOCTYPE html>
<html>
	<head>
		<meta charset=utf-8 />
		<title>Add remove more field dynamically in javascript</title>
		<script>
			fields = 0;
			function addButton() {
				if (fields < 10) {
					var id = "file" + fields;
					document.getElementById('text').innerHTML +=
						"<div>Field: "+fields+"<input type='text' name='text_"+id+"' /><input type='file' name='file_"+id+"' />" +
						"<a href='#' onclick='removeBuuton(this.parentNode)'></a>remove";
					fields += 1;
				} else {
					document.getElementById('warning').innerHTML = "Only 10 upload fields allowed.";
					document.form.add.disabled = true;
				}
			}
			function removeBuuton(element) {
				if (fields > 0) {
					document.getElementById('warning').innerHTML = "";
					var parent = document.getElementById('text');
					parent.removeChild(element);
					fields -= 1;
				}
			}
		</script>
	</head>
	<body>
		<a href="#" onclick="addButton()">Click to add button</a> 
		<div id="text"></div>
		<div id="warning"></div>
	</body>
</html>

You can also the demo here.In my demo section I have shown by adding input type and file filed .Means here you can see input fild and a browse button which are creating dynamically after clicking on button:

Live Demo


Click To Run

Add remove more field dynamically
Tagged on:             

Leave a Reply

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