Add multiple textbox with jQuery

by  
Share:
Add Remove multiple textfield with jquery

Text field is the most basic element in a form, we always use text fields for submitting name, emails etc. In all these cases we use text fields with different names(name attribute). But what will you do if you have to enter multiple projects, hobbies, education qualifications all under a same group. In that case you will need a technique to add remove multiple text fields. In this tutorial you will learn how to add remove multiple text fields with jquery.

View Demo

Steps to add remove multiple textbox

To add/remove multiple textbox just follow these instructions given below.

Attach jQuery library file inside the head tag of the page

<script src="jquery-1.9.0.min.js"></script>

Add a text field and an ADD anchor link. So when user clicks on add link a new text field will be generated.
<input class="textbox" name="n" value="static text field"><span><a href="javascript:void(0);" class="add" >Add More</a></span>

Create a div and assign a class to it. This is where the dynamic generated textbox will appear. It acts as a placeholder for new textbox .
<div class="contents"></div>

Bind the add link to a click event. It will generate a new textbox with a REMOVE anchor link.
<script>
            $(document).ready(function() {
                $(".add").click(function() {
                    $('<div><input class="textbox" name="m" value="dynamic text field"><span class="rem" ><a href="javascript:void(0);" >Remove</span></div>').appendTo(".contents");
                });
            });
</script>

Also bind the REMOVE link with a click event. So when ever the user click on remove link that textbox will be removed.
<script>
$('.contents').on('click', '.rem', function() {
  $(this).parent("div").remove();
});
</script>

View Demo
Share to download the Source Codes for FREE!
We're glad to give free downloads, but we need your love to carry on making that.
Please support us by sharing the page.

Get the latest updates directly in your inbox for FREE: Subscribe here

Share your feedback / let me know your doubts regarding this tutorial in the comment box given below.

Share:
Hasan

Shahrukh Khan (Hasan)

A software engineer who's a die-hard coder, blogger, dreamer and mentor with years of expertise in web development. Know more...

Related Posts

Reghunathan on

hi friend, i need payment gateway demo code for E-Commerce website using core php and mysql.

Reply
Shahrukh Khan on

Hi..what payment gateway code you need.. there are lots of payment gateways like paypal, ccaveneue etc..

Reply
rodolfo on

hi, I have this problem or error message:
I am using multiple text field jquery like test:
Fatal error: Undefined class constant ‘MYSQL_ATTR_INIT_COMMAND’ in C:\Documents and Settings\Administrador\Mis documentos\Descargas\server2go\htdocs\querys\configure.php on line 26

Whats happens?
please, Help me.

Thanks.

Reply
Mukesh Patidar on

hi how can we add two or three text box like product ,description ,and price and how to database value goes into different column if i add 5 product detail than all five detail value goes into different column it is possible

Reply
Shahrukh Khan on

get data via json/ajax and then parse json via javascript/jquery and put the value on the given fields

Reply
akshay tiwari on

its easy to multiple insert but difficult multiple update at time plz tell me how to update that

Reply
Shahrukh Khan on

just send the ID in the hidden field as an array. and update that accordingly.

Reply
ASWINI on

I NEED TO ADD MULTIPLE FIELDS ONE BY ONE IN SINGLE TEXT BOX..NOT IN MULTIPLE TEXT FIELDS? IS IT POSSIBLE.?

Reply
Shahrukh Khan on

Yes it is.

Reply

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.