Dynamically Add Remove Text Box Using Jquery

By

January 25, 2013Jquery4 Comments

Dynamically Add Remove Text Box Using Jquery

In this tutorial, I’ve written a small piece of code in jquery that will help the people who are having an issue of populating text boxes dynamically with “Add More” button in a form. I’ve used jquery UI also in this code to make a bounce or jumping effect when each text box is populated with add button. You can remove any text box any time by hitting remove icon given with them. To understand the better, you can view the demo and download the code given in zip file.

Dynamically Add Remove Text Box Using Jquery

Dynamically Add Remove Text Box Using Jquery

Basic Markup Or Style Sheet

body{
	font-family:arial;
	color:#666;
}

img{
	cursor:pointer;
}

.txt_div{
	float:left;
	width:300px;
	margin-bottom:10px;
}
.left{
	float:left;
	width:250px;
}
.right{
	float:right;
	width:40px;
	padding-top: 11px;
}

form input{
	border:2px solid #dadada;
    border-radius:7px;
    font-size:20px;
    padding:5px;
	width:250px;
}

input:focus {
    outline:none;
    border-color:#9ecaed;
    box-shadow:0 0 10px #9ecaed;
}

form .button{
	background: -moz-linear-gradient(top,  #00b7ea 21%, #009ec3 76%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(21%,#00b7ea), color-stop(76%,#009ec3)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #00b7ea 21%,#009ec3 76%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #00b7ea 21%,#009ec3 76%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #00b7ea 21%,#009ec3 76%); /* IE10+ */
	background: linear-gradient(to bottom,  #00b7ea 21%,#009ec3 76%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */
	color:#DFE9EC;
	border:none;
	cursor:pointer;
	padding:7px;
}

This is the basic markup or style sheet of the page that will make attractive the text boxes and buttons. You can change it accordingly.

Jquery Script

$(document).ready(function(){
	var id = 2,max = 8,append_data; //max is the limit of textboxes

	/*If the add icon was clicked*/
	$(".add").live('click',function(){
		if($("div[id^='txt_']").length 		$(this).remove(); //remove the add icon from current text box
		var append_data = '</pre>
<div id="txt_'+id+'" class="txt_div" style="display: none;">
<div class="left"><input id="input_'+id+'" type="text" name="txtval[]" /></div>
<div class="right"><img class="add" src="add.png" alt="" /> <img class="remove" src="remove.png" alt="" /></div>
</div>
<pre>
';
		$("#text_boxes").append(append_data); //append new text box in main div
		$("#txt_"+id).effect("bounce", { times:3 }, 300); //display block appended text box with silde down
		id++;
		} else {
			alert("Maximum 8 textboxes are allowed");
		}
	})

	/*If remove icon was clicked*/
	$(".remove").live('click',function(){
		var prev_obj = $(this).parents().eq(1).prev().attr('id');  //previous div id of this text box
		$(this).parents().eq(1).slideUp('medium',function() { $(this).remove(); //remove this text box with slide up
		if($("div[id^='txt_']").length > 1){
			append_data = '</pre>
<img class="remove" src="remove.png" alt="" />
<pre>';
		}else{
			append_data = '';
		}
		if($(".add").length < 1){
			$("#"+prev_obj+" .right").html('</pre>
<img class="add" src="add.png" alt="" />
<pre> '+append_data);
		}
		});

	})
});

This is the main javascript code which performs the functionality of adding or removing text boxes dynamically. The maximum limit of adding text boxes is given 8 in the script. This can be changed according to your requirement.

Index.html


Dynamically Add Remove Textboxes Using Jquery
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

</pre>
<div style="width: 800px; margin: auto; padding-top: 100px;">
<h1>Dynamically Add Remove Textboxes Using Jquery</h1>
<form id="form" name="form">
<div id="text_boxes" style="width: 300px; height: auto;">
<div id="txt_1" class="txt_div">
<div class="left"><input id="input_1" type="text" name="txtval[]" /></div>
<div class="right"><img class="add" src="add.png" alt="" /></div>
</div>
</div>
<div style="clear: left;"></div>
 <input class="button" type="button" value="SUBMIT" /></form></div>
<pre>

That’s all the script. You can download it also and free to modify it anytime.

4 Responses to “Dynamically Add Remove Text Box Using Jquery”
  1. Selva says:

    Thank You So Much!

    Excellent work you have done!

  2. jamso says:

    Its a excellent job. How do I get the POST data in another php file and insert the data in database. ?

  3. Tiago Mendes says:

    Thank You, its great.

    I have all ready this use this script for puting the data in my data base, but now i whant to creat the option to edit the the data. How can we feed the script?

  4. Normally I can’t read post upon information sites, on the other hand would want to declare that the following write-up really compelled myself to perform that! Ones way of writing has become impressed everyone. Appreciate it, fairly good content.

Leave a Reply

Manish Jangir - Find me on Bloggers.com