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>

Try Demo

Tags : jquery textbox

mkyong

Founder of Mkyong.com, love Java and open source stuffs. Follow him on Twitter, or befriend him on Facebook or Google Plus.

Here are some of my recommended Books

Popular Posts

// this should be put inside the $(document).ready(function() { ... }); or $(function() { ... }); $('#submit').click(function() { //looping through the textboxes for(i=1; i<counter; i++) { $.post( // Data will be passed to this php file. This will do the server side processing. 'process.php', { value: $('#textbox'+i).val() // Data (values of textboxes) that will be passed via HTTP POST request. }, function() { // A callback function that will be executed after a successful request. var msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val(); alert(msg); } ); } });

/** Assuming that you will use MySQL for your database **/ $connect = mysql_connect('localhost', 'root', '') or die(mysql_error()); /** database connection **/ $selectdb = mysql_select_db('dbname', $connect); /** selecting the databse **/

bijol May 17, 2013 at 3:02 pm
how to add another texbox and get value of both text box when click on gettextbox value pls help!!!!!
bijol May 17, 2013 at 3:01 pm
how to add another texbox and get value of both text box when click on get textbox value button pls help
Archana April 15, 2013 at 6:35 pm
it helped me a lot
Janna March 8, 2013 at 11:14 am
Hi Sir!
How will i save the textbox value using CI? Thanks!
sean February 16, 2013 at 6:24 pm
How To Add / Remove … image ?
- arun April 29, 2013 at 7:22 pm
  Hi,
  There are two ways you can do it.
  1) Simple “Hide” and “Show” images.
  $(‘#btShow’).click(function() {
  $(‘#imgTest’).show();
  });
  $(‘#btHide’).click(function() {
  $(‘#imgTest’).hide();
  });
  2) Add or remove the images.
  $(‘#btShow’).click(function() {
  var ImgList = new Array();
  ImgList[1] = ‘http://www.encodedna.com/images/utility.png’;
  $(‘#imgTest’).attr(‘src’, ImgList[1]);
  });
  $(‘#btHide’).click(function() {
  //$(‘#imgTest’).hide();
  var imgBlank = ‘http://www.encodedna.com/images/blank.png’;
  $(‘#imgTest’).attr(‘src’, imgBlank);
  });
Muthu December 5, 2012 at 5:44 pm
How to Handle validation for this text box? Please give the code for validation
mukesh pandey November 15, 2012 at 3:46 pm
sir please give some example struts2 with grid using jquery and struts2 with jquery(like show and hide textfiled when drop down list is use.
$(document).ready(function() {
$(‘#types’).change(function(){
if($(‘#types’).val() == ‘Other’)
{
$(‘#other’).show();
//document.getElementById(‘other’).disabled = true;
}
else
{
$(‘#other’).hide();
}
});
});
Registration Page
but it have no efect of show and hide
chakra November 3, 2012 at 7:48 pm
Hey is it possible to create next textbox when user hits enter button(on the keyboard). Say after giving some input in first textbox if the user hit enter key can we create next textbox. Hope u understood what i meant. By the thank u for u tutorial, is helping a lot.
Lauretha August 1, 2012 at 11:42 pm
Hi, I tried to retrieve the textbox value in the servlet by using getParameter()
However, it doesn’t work for the added textboxes (the first one is OK).
Does anyone know why? and how can I solve this problem?
Thanks in advance.
vin July 19, 2012 at 8:31 pm
how to store these content in database.
- Naval August 29, 2012 at 9:14 pm
  you store the value in the hidden filed and then separate through thing and store in the database using split

mani June 10, 2012 at 9:45 pm

dear sir

how to insert dynamic textbox values into database using jsp or javascript

Aldrin Butcon July 11, 2012 at 11:04 am
Hi…
Thanks for this post..
Aldrin Butcon July 11, 2012 at 11:08 am
Hi mani,
This is achieved by using jQuery ajax methods like $.get() or $.post().
For more details about jQuery ajax methods, visit http://api.jquery.com/category/ajax/
Aldrin.

Aldrin Butcon July 11, 2012 at 11:10 am

Assuming that you have a button that will handle the submission with attribute id=”submit”:

// this should be put inside the $(document).ready(function() { ... }); or $(function() { ... });
$('#submit').click(function() {
 
    //looping through the textboxes 
    for(i=1; i&lt;counter; i++) {
 
        $.post(
            // Data will be passed to this php file. This will do the server side processing.
            'process.php', 
            { 
                value: $('#textbox'+i).val() // Data (values of textboxes) that will be passed via HTTP POST request.
            }, 
            function() { // A callback function that will be executed after a successful request.
                var msg += &quot;\n Textbox #&quot; + i + &quot; : &quot; + $('#textbox' + i).val();
                alert(msg);
            }
        );
 
    }
 
});

Aldrin.

Aldrin Butcon July 11, 2012 at 11:33 am

In process.php:

Aldrin Butcon July 11, 2012 at 11:42 am
…could not post the next part, sorry…

emily April 8, 2012 at 9:43 pm
this is not working with IE :(
kamlesh April 3, 2012 at 11:34 pm
how we will handle these multiple textboxes with php
- emily April 8, 2012 at 9:49 pm
  if( isset( $_POST['textbox1'] ) ){
  $value1=$_POST['textbox1'];}
  else if ( isset( $_POST['textbox2'] ) ){
  $value2=$_POST['textbox2'];}
  etc….
Max March 22, 2012 at 2:59 am
Can someone just post the full code that works in the latest jquery. Mine wont work. No errors, just the buttons wont work
- emily April 8, 2012 at 9:46 pm
  it should work on chrome,mozila ,opera and safari the above code. the only browser that doesn’t work is IE
Isaac Wong March 4, 2012 at 8:14 pm
after(‘</div')
Isaac Wong March 4, 2012 at 8:12 pm
For version after 1.4 ,there is another way apart from removing after() object ,
that is adding “” include after()
Boris February 27, 2012 at 3:40 am
Nice code, however I did notice your example has 2 and tags.
Also, for those who want to use this code on jquery v1.7+ find this:
newTextBoxDiv.after().html(‘Textbox #’+ counter + ‘ : ‘ +
and replace with:
newTextBoxDiv.html(‘Textbox #’+ counter + ‘ : ‘ +
Cheers!
B
- Boris February 27, 2012 at 3:41 am
  “2 and tags” should say 2 ‘head’ and ‘body’ tags.
- satwik May 26, 2012 at 9:40 am
  Thanxs for your comment i was fighting with the error since 2 days ur awesome dude @Boris
- Ren February 27, 2013 at 10:45 pm
  Thank you bosss…. Save many hours…
Franck January 27, 2012 at 11:01 pm
Solutions do not work with jquery 1.7.1.
Any suggestion to update the code ?
Thx
- Franck January 27, 2012 at 11:50 pm
  Finally, the code works fine under jquery 1.7.1 without .after() and jQuery.noconflict()
  - emily April 8, 2012 at 9:52 pm
    WHAT IS jQuery.noconflict() ?
Priya Ranjan Kumar January 25, 2012 at 3:00 pm
This is Very Good JQuery for adding New Field.
Very Nice………..
john January 13, 2012 at 10:38 pm
the code did not work for me too. i need the codes ASAP. tnx
- emily April 8, 2012 at 9:50 pm
  it should work on chrome,mozila ,opera and safari the above code. the only browser that doesn’t work is IE
Frank January 6, 2012 at 2:06 pm
Great Tutorial Mannn
Thanx……………
Daniel January 3, 2012 at 4:53 pm
How would i add css and style to the textboxes that are added dynamicaly?
Christian Esperar December 30, 2011 at 1:19 am
Thank you very much! This script is a good start for my project. Thanks!
- emily April 8, 2012 at 9:50 pm
  it works in IE?
Maniya December 6, 2011 at 3:52 pm
Its really good and helped me..
Ramón October 19, 2011 at 7:50 am
Thanks for this! You saved my life! :)
Kobena September 7, 2011 at 1:38 am
How do i get the array variable into my php.
Kobena September 5, 2011 at 9:02 pm
Working great but can someone show me how to get the msg variable into my php script?
Jennifer Junio August 31, 2011 at 3:29 pm
WOW THIS IS AWESOME! just what i’ve been looking for.
Whew save me a lot of time :)
anyways..
can you please do a tutorial on how to save the fields value in php/mysql.
Please :)
i’ll wait for your response.
- Jennifer Junio August 31, 2011 at 3:32 pm
  all of a sudden it’s not working on localhost? I need this.
  - Christian Esperar December 30, 2011 at 1:30 am
    I think it’s not working in the latest version of jQuery.
Mohamed javid Khan June 14, 2011 at 3:40 pm
Hello I am javid Khan from siber Help .Thank you .It’s work Amazing .Nice post .
passerby March 25, 2011 at 11:49 pm
thanks nice work :) may I know how do I send it to other php page via POST? I’m a new PHP learner and I don’t know much about javascript.
Thanks in advance :)
dipen March 5, 2011 at 6:22 pm
!!thanks a tonne bro!!
Buewanesh January 13, 2011 at 2:46 am
Nice coding it’s working 100%,,
I have a small problem, i’m looking for a update for my site..
BOX –> value
(BOX)Length | (BOX)Height | (BOX)Base –> Add |Delete
want to add or delete and these box value should be calculate… have u any idea..
thanks
Buewanesh
VItal Sap December 29, 2010 at 12:20 am
Its working. just remove the “.after()” then it will work for jquery-1.4.4.min.js too.
Thanks!
- AVK January 21, 2012 at 12:56 am
  Thank you! you saved my day.
acebo December 28, 2010 at 11:55 am
Great!!
Thank you.. :))
Osama November 6, 2010 at 4:41 am
Thanks, it works!!!
Lord Scorpio September 17, 2010 at 3:10 pm
The code works great with Jquery 1.3.x but is not working with 1.4.2 it reports an error as follows:
Error: newTextBoxDiv.after() is undefined
Im not so much experience using jquery, so i cannot help as i would like. But, let me say, this code is great
Greetings
- John September 25, 2010 at 2:16 am
  I was able to get it to work with jQuery 1.4.2 by removing the “.after()” and using newTextBoxDiv.html(‘<label…) instead of newTextBoxDiv.after().html('<label…). So far everything appears to be working just fine in 1.4.2 with the ".after()" removed
  - H0RNET November 25, 2010 at 12:10 am
    THX
  - acebo December 28, 2010 at 11:54 am
    very useful
    Thank you
    :)
  - spellbyte September 22, 2011 at 5:40 pm
    thanks for this fix, had me stumped for half an hour before i decided to hit google :)
  - Vanessa December 8, 2011 at 7:31 am
    Thanks for the correction. This solves the problem!
Zvonimir September 9, 2010 at 4:15 am
This code is not working with latest version of jQuery (current version is 1.4.2). Can someone correct code so it’s working with latest version of jQuery
Rinku July 26, 2010 at 3:41 pm
Hi,
How do i bind this textbox to a piece of data from database and where.
Please suggest.
Thanks
- mkyong July 26, 2010 at 3:50 pm
  It’s depends on what framework or language you are using.
Dharit July 22, 2010 at 7:37 pm
I m glad It works easily and very accurate.Good Job..
hi June 14, 2010 at 5:50 pm
the code did not work for me.
- Eren March 2, 2011 at 7:41 am
  read the first reply ;)
  i was looking for something like this.
  i could creat dynamically forms but i couldn’t get the valeus. Nice code, thx :)
- Vanessa December 8, 2011 at 7:33 am
  You may consider substituting the “$” by “jQuery”

How to add / remove textbox dynamically with jQuery

jQuery dynamic textbox example

Popular Posts

What is your opinion?

Do you know the answer?

jQuery dynamic textbox example

Related Posts

Popular Posts

What is your opinion?

Do you know the answer?