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:

<html>
<head>
<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);
i++;

return false;
});

$('#remNew').live('click', function() {
if( i > 2 ) {
$(this).parents('p').remove();
i--;
}
return false;
});
});

</script>

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

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

</body>
</html>

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.

Post Tagged with ,

29 Responses so far.

  1. Vinod Dubey says:

    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.
    Vinod

  2. mahesh says:

    hi
    first i thank for posting this… its really useful to me.. i used in my project. easy to understand this..

  3. seps says:

    nice tut, how to insert into mysql table

    • sanjeev says:

      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.

      Regards:
      Sanjeev

  4. manos says:

    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!!

  5. manos says:

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

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

    thanks again!

  6. mafaik says:

    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

    regards,
    .mafaik

  7. KAlyan says:

    Really helpful;)

  8. KAlyan says:

    thanks:)

  9. Kunal Baweja says:

    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.

  10. [...] I wrote about adding dynamic input fields in a webpage using jQuery, I got a lot of queries on how to submit it to database. This tutorial is all about generating [...]

  11. peter says:

    this is really cool. i would love to see it insert into a database

  12. Hoai Pham says:

    The topic very useful. Thanks

  13. sudheer says:

    It’s an very good article.helped me a lot.

  14. Jinu says:

    I’m not able to remove the dynamically added elements

    • Acidy says:

      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() {
      with:

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


      });

  15. rakesh says:

    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.

  16. Pirate Pete says:

    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.

  17. Bagus fikri says:

    Hi why its not working using newest jquery ?

  18. yen says:

    just replace live with bind and happiness ensues.

  19. yen says:

    No sorry, what am I talking about…Bind of course will not work for items not already existing. Like someone said you need to use ‘on’.

  20. Akshata says:

    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

  21. Gomy says:

    Why didn’t work on other version of jquery?

  22. StillLearning says:

    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?


About sanjeev

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