Dynamically Add Input Fields To Form Using jQuery

As jQuery is so powerful and it is easy to learn, it attracts huge volume of web developers. In this post I will show how to dynamically create input fields in a web page. Well you can use the logic to create other elements dynamically in a webpage.

You can check the LIVE DEMO.

You can use my tutorial on inserting record in database using jQuery and php and combine it with this tutorial to create a wonderful dynamic form accepting inputs from user and insert it in your database. The code is pretty easy to interpret and understand how it works. Here is our code:

<title> Dynamically create input fields- jQuery </title>
<script  src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>        // Calling jQuery Library hosted on Google's CDN
<script type="text/javascript">
$(function() {
var addDiv = $('#addinput');
var i = $('#addinput p').size() + 1;

$('#addNew').live('click', function() {
$('<p><input type="text" id="p_new" size="40" name="p_new_' + i +'" value="" placeholder="I am New" /><a href="#" id="remNew">Remove</a> </p>').appendTo(addDiv);

return false;

$('#remNew').live('click', function() {
if( i > 2 ) {
return false;


<h2>Dynammically Add Another Input Box</h2>

<div id="addinput">
<<input type="text" id="p_new" size="20" name="p_new" value="" placeholder="Input Value" /><a href="#" id="addNew">Add</a>


Note: You can dynamically add any other element using the same logic. So try your hands on some coding and get awesome results.

To get this script (well explained and commented), email me or comment below.

About sanjeev

Dreamer, Blogger and Thinker. I love to help people in solving their problems. You can also join me HERE

Related posts:

35 Responses so far.

  1. Hi there,
    This is a wonderful example. I am developing similar dynamic form using jqueryui features such as dialog(), datepicker(), etc. I notice in this post you are creating input fields dynamically, without using element. That is great. However I was wondering how can I submit the data entered on this a dynamically generated input fields to server. Thanks in advance.

    1. if you limit the number of input fields that can be created.. then you can submit the data into database. e.g. say you have allowed users to create input fields dynamically but maximum 10 fields then in this case you can submit data in database. We will cover this tutorial in our future articles.


  2. hi! Thanx for example!is very usefull
    i’m trying to change the text of dynamic_textfields,, .

    $(‘Remove ‘).appendTo(addDiv);

    function ChangeValue(){
    $(“p_new_’ + i +'”).val(“New word”);

    Any idea?? Thank you in advance!!

  3. I mean,
    how can you use the “ChangeValue()” function to change the value of a specific dynamic field?

    $(‘Remove ‘).appendTo(addDiv);

    thanks again!

  4. how if using prependTo?
    i want to modiify it so every time i click “add” link, the new row will create on the top
    so i dont have to scroll my mouse to insert the value of new row


  5. Hi I am making a committee creation page in JSP (Java Server Pages) where I want to use this code so that users can dynamically add committee members to their committees. Can you help me with the code to store these values into the database.

    It’s urgent.

    1. I had the same issue with removing elements.
      I’ve found that was because .live() is now deprecatd with newest version of Jquery.So try to replace $(‘#remNew’).live(‘click’, function() {

      $(document).on(‘click’, ‘#remNew’,function(){


  6. Great buddy for posting this tut.I am new in prgming. How can i save the dynamic form created by user in png/jpeg and pdf format.I don’t want to submit to mysql database.

  7. Just a small tip, if you would like me to visit your website again, dont show me a popup that demands I like your website on Facebook first. It’s irritating and it prevents me from getting to the information I need.

  8. Hi,
    Its fine, i want to insert dynamically generated rows into database. And I’m creating dyanamic rows using jquery. and that rows contains multiple textbox and one combobox. How to do that? Please hoelp me out to solve this problem

  9. Hi sanjeev. Thanks for the tutorial. I was wondering if there’s a way to save the state. For example, I’m using your code to let users dynamically add file type inputs within a form. If a user has added 3 file type inputs and submitted the form, when he hits the back button on the browser, he should see the 3 file type inputs instead of just the first one. Is this possible?

Leave a Reply

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