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.
Comments
35 responses to “Dynamically Add Input Fields To Form Using jQuery”
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
Thank u this is very good example ..but i want to store dynamically added text box values in sqldatabase..plz help me..
hi
first i thank for posting this… its really useful to me.. i used in my project. easy to understand this..
I like it
nice tut, how to insert into mysql table
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
How do you limit the number of input field that can be created? I only want 2 extra fields added.
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!!
I mean,
how can you use the “ChangeValue()” function to change the value of a specific dynamic field?
$(‘Remove ‘).appendTo(addDiv);
thanks again!
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
Really helpful;)
thanks:)
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.
Hi Kunal,
I will publish the tutorial/code to submit data of dynamicaly genrerated fields into database soon.
Regards:
Sanjeev
[…] 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 […]
this is really cool. i would love to see it insert into a database
Hi Peter,
Check this one https://infotuts.com/dynamically-add-input-fields-submit-to-database It’s inserting data into Mysql database.
The topic very useful. Thanks
It’s an very good article.helped me a lot.
I’m not able to remove the dynamically added elements
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(){
…
});
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.
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.
Hi why its not working using newest jquery ?
just replace live with bind and happiness ensues.
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’.
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
Why didn’t work on other version of jquery?
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?
I have exactly the same question as @StillLearning.
Thanks a lot for the example.
[…] friends I have already published easy and simple tutorials on how to dynamically add form fields using jQuery and then how to submit those dynamic fields data to database. I got good response for both the […]
Hi,
Thanks for posting this.
To understand deeply, may i ask you send me the explained version of this?
Regards,
Bala
This code is very usefull for me. Thanks dear, keep it up.
I just want to add ONE input field and return the input to the database. How can I achieve this?
Thanks