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.

35 thoughts on “Dynamically Add Input Fields To Form Using jQuery”

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

    1. Thank u this is very good example ..but i want to store dynamically added text box values in sqldatabase..plz help me..

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

    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.

      Regards:
      Sanjeev

      1. How do you limit the number of input field that can be created? I only want 2 extra fields added.

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

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

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

    thanks again!

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

  6. 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. Hi Kunal,

      I will publish the tutorial/code to submit data of dynamicaly genrerated fields into database soon.

      Regards:
      Sanjeev

  7. Pingback: Dynamically Add Input Fields And Submit To Database With jQuery and PHP - InfoTuts

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

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


      });

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

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

  10. 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’.

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

  12. 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?

  13. Pingback: Dynamically clone form elements with Cloneya jQuery Plugin - InfoTuts

  14. Hi,

    Thanks for posting this.

    To understand deeply, may i ask you send me the explained version of this?

    Regards,
    Bala

  15. I just want to add ONE input field and return the input to the database. How can I achieve this?
    Thanks

Comments are closed.