Main Tutorials

How to add / remove textbox dynamically with jQuery

In jQuery, it’s quite easy to add or remove a textbox dynamically. The idea is quite simple, just combine the use of ‘counter‘ variable, jQuery createElement(), html() and remove() method. See below example :

jQuery dynamic textbox example


<html>
<head>
<title>jQuery add / remove textbox example</title>
 
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

<style type="text/css">
	div{
		padding:8px;
	}
</style>

</head>

<body>

<h1>jQuery add / remove textbox example</h1>

<script type="text/javascript">

$(document).ready(function(){

    var counter = 2;
		
    $("#addButton").click(function () {
				
	if(counter>10){
            alert("Only 10 textboxes allow");
            return false;
	}   
		
	var newTextBoxDiv = $(document.createElement('div'))
	     .attr("id", 'TextBoxDiv' + counter);
                
	newTextBoxDiv.after().html('<label>Textbox #'+ counter + ' : </label>' +
	      '<input type="text" name="textbox' + counter + 
	      '" id="textbox' + counter + '" value="" >');
            
	newTextBoxDiv.appendTo("#TextBoxesGroup");

				
	counter++;
     });

     $("#removeButton").click(function () {
	if(counter==1){
          alert("No more textbox to remove");
          return false;
       }   
        
	counter--;
			
        $("#TextBoxDiv" + counter).remove();
			
     });
		
     $("#getButtonValue").click(function () {
		
	var msg = '';
	for(i=1; i<counter; i++){
   	  msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
	}
    	  alert(msg);
     });
  });
</script>
</head><body>

<div id='TextBoxesGroup'>
	<div id="TextBoxDiv1">
		<label>Textbox #1 : </label><input type='textbox' id='textbox1' >
	</div>
</div>
<input type='button' value='Add Button' id='addButton'>
<input type='button' value='Remove Button' id='removeButton'>
<input type='button' value='Get TextBox Value' id='getButtonValue'>

</body>
</html>

About Author

author image
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter. If you like my tutorials, consider make a donation to these charities.

Comments

Subscribe
Notify of
107 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
Direct admission
6 years ago

Thanks for sharing sir

Dge-06
5 years ago

Hi,
thank for this snippet.

I would like to calculate the fields. Example:

Textbox # 1: 150
Textbox # 2: 200

and retrieve the value of the added fields.

How to do ? Thank you

rr"r
3 years ago
Reply to  Dge-06

r””r”

Management Quota
6 years ago

Thnaks very much

abhinav kumar
6 years ago

Thanks for the information sir.

Bodry Dexter
9 years ago

VERY VERY VERY MEGA ULTRA GIGA HELPFUL,
I’ve used it to create FILE UPLOAD FIELDS, I also change and removed some JS code and it work like in my dream!
THANK SO MUCH

Ramana
2 years ago

How can I get the value of randomly generated text box value in spring mvc

test
3 years ago

where is demo?

CodinStatus.com
3 years ago

Thanks for sharing.. Can you suggest me how to insert data in node.js using add remove input field

Rapsan jani
3 years ago

Great tutorial… Easy to understand & learn.
Can you share How to insert multiple data in PHP using add remove input field in jquery

sahlin
3 years ago

how would I do it if I want to display the text boxes, that are disabled, and displaying the data from the sql tables. I can connect to db, but how will it work as they rows in the table will be dynamic and for each row I need the textbox

rownak
4 years ago

its really very helpful..thank u so much..

abiemp
6 years ago

thank you! great works!

Amit Kumar
7 years ago

why its not working in IE and showing -> IE restrict this webpage from running script or ActivX controls.

Dubesh Shrestha
8 years ago

wow… supop!!!! thanks….

Pushpak Khatri
8 years ago

i want to open 4 dynamically with using jquery so how can i do that? can you please give me example of that.. i am waiting for your reply..

vems j
6 years ago
Reply to  Pushpak Khatri

simply write 4 times.. no need of jquery
and if you wish to include more then link the fourth textbox with the code above

daniel
8 years ago

how can the inputted values go to
database

vems j
6 years ago
Reply to  daniel

there s a little correction

send the data via ajax to another page…
suppose you created a database of name textbox with value id,login,city,textvalue
thn your code will be like dis…
——————— the following part of code given above will be modified like this————————

$(“#getButtonValue”).click(function () {

var msg = ”;
for(i=1; i<counter; i++){
msg = $('#textbox' + i).val(); ————————–correction is in this line where i delete the + with msg———————-
$.post('textvalue.php',{m:msg},function(data){
});
}
alert(msg);
});
});

———–and the textvalue page will be like dis—————-

gudluck

vems j
6 years ago
Reply to  daniel

send the data via ajax to another page…
suppose you created a database of name textbox with value id,login,city,textvalue
thn your code will be like dis…
——————— the following part of code given above will be modified like this————————

$(“#getButtonValue”).click(function () {

var msg = ”;
for(i=1; i<counter; i++){
msg += $('#textbox' + i).val();
$.post('textvalue.php',{m:msg},function(data){
});
}
alert(msg);
});
});

———–and the textvalue page will be like dis—————-

gudluck

vems j
6 years ago
Reply to  daniel

send the data via ajax to another page…
suppose you created a database of name textbox with value id,login,city,textvalue
thn your code will be like dis…
——————— the following part of code given above will be modified like this————————

$(“#getButtonValue”).click(function () {

var msg = ”;
for(i=1; i<counter; i++){
msg += $('#textbox' + i).val();
$.post('textvalue.php',{m:msg},function(data){
});
}
alert(msg);
});
});

———–and the textvalue page will be like dis—————-

gudluck

daniel
8 years ago

using webmatrix

sibi
8 years ago

thanks for the code, and am using jquery-1.11.1 version its working well while am trying in sample code but i did repeat the code in my real time project, here php not considering appended text box values which means it taking very first text box alone.

Ilyas
8 years ago

Very Helpful, thank you master.

zeeshan
9 years ago

how we make an xml which store text box value and then show into gridview using jquery

VR
9 years ago

Hello Friends. I’m getting the following error in IE8, Please help me to fix this issue urgently.
Many Thanks in Advance.
‘after()’ is null or not an object
note: The same code is working fine in other browser like chrome,safari etc.

Keust
9 years ago

Is it possible to always leave the minimum of 1 textbox and an maximum of 8?
I am trying to create div’s with in there (name, adress, e-mail) and if people want to add a user, then press the button. The problem is if they remove someone (accident for example) Then you will lose the data.

Can i combine the jQuery with an PHP form? Or does the form don’t registred all the data?

Zaheer
9 years ago

code is very nice but its not running in my php page
any sulotion pleas

Turangga
10 years ago

I have script like this:

BEGIN

newTextBoxDiv.after().html(

” +

‘$input04) { ?>’ +

‘<option value="' +

'’ +

‘”>’ +

” +

” +

” +

” +

‘Jumlah : ‘ +

”);

END

When I put “$input04) { ?>” and “”, adding another “textfield” and “option select” not working

mcleen
10 years ago

hi sir. can you give the code of computing the value of the record in the text box (“when my record is interger”) .. thanks. 😀

Ravi
10 years ago

HI,

i tried this solution and it is working fine. however my problem is that i have some more buttons like save and print on the form and when i click on those buttons it causes postback of the page and the TextBoxDiv1 becomes visible and the jquery functions for add and remove buttons stop working after that. i tried byadding return false on other button click but it did not help me out. can you please guide me ?

Kapil
10 years ago

Can somebody help me with my query. I am a newbie for jquery.

With this code on click of a button I get values in a string. But what If i want values of a textbox in different strings so that I can pass each value in my code to some different list column.

Thanks

Randz
10 years ago

Thanks, this is an awesome code. Can you also teach me how to save the values placed on those textbox to database?

thanks a lot!!!

arun
10 years ago
Reply to  Randz

It is really simple. Just add “runat=server” to the textboxes and the “submit” button while creating them dynamically. So the values in the boxes can be fetched using code behind source and insert them in the database.

Check the below link which has a an article for what you are looking for. It not only creates the textboxes, but also a “submit” button is created dynamically and fetches the values.

http://www.encodedna.com/2013/07/dynamically-add-remove-textbox-control-using-jquery.htm

You can modify code the way I have described above.

bijol
10 years ago

how to add another texbox and get value of both text box when click on gettextbox value pls help!!!!!

bijol
10 years ago

how to add another texbox and get value of both text box when click on get textbox value button pls help