jQuery Dynamically add input fields | Lessoncup Programming Blog

Tuesday, 14 January 2014

jQuery Dynamically add input fields

Hi, today i am going to tell about how to add and remove the dynamic input fields by using jQuery, this kind of app is sometimes very useful when we add unlimited skill set in that case we can use this script very easily, it is just few lines of code .. enjoy it.


HTML

in html take the input box and one add button
<div class="lessoncup">

<div id="box">
<input name="name" type="text" id="name" class="name" placeholder="Input 1">
<img src="add.png" width="32" height="32" border="0" align="top" class="add" id="add" />
</div>

</div>

JAVASCRIPT

now write the click function to add button as a selector, here i am storing the input box #box div into inp variable to use later and taking the length of input boxes using size() method and adding addition operator to increasing the input box

now i wrote the html code with input text box and remove buttons and i am generating dynamic names to input text box , and i used appendTo() method to append the content and passing inp variable inside the method

to remove the added input fields i just write the click function on remove button and inside this function i just used parent() method to get the parent element and i used remove() method to remove the added input box
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

<script>

$(document).ready(function(){
 
 $('#add').click(function(){
  
  var inp = $('#box');
  
  var i = $('input').size() + 1;
  
  $('<div id="box' + i +'"><input type="text" id="name" class="name" name="name' + i +'" placeholder="Input '+i+'"/><img src="remove.png" width="32" height="32" border="0" align="top" class="add" id="remove" /> </div>').appendTo(inp);
  
  i++;
  
 });
 
 
 
 $('body').on('click','#remove',function(){
  
  $(this).parent('div').remove();

  
 });

  
});

</script>

Live Demo   Download Script

9 comments :

  1. this will create duplicate instances. Follow the steps:
    -> Create new 3 instances (input 2, input 3, input 4)
    -> Delete the first one (input 2)
    -> Create one new again

    You will see input 4 two times there.

    Solution is try maintaining the last index of instances (withing a variable), instead of size of instances and update the varibale when new instance is created.

    ReplyDelete
  2. I want to report a bug, if you add 5 fields, then remove first 2 then it will again start from 2 3 4 5...
    like wise it will be going to duplicate the textfield names , and will create problem while reciving parameter at server side.
    I have solution for it , Inbox me

    ReplyDelete
  3. Mohsin Chaudhari what is your solution?

    ReplyDelete
  4. I think we need to create array and store that values in array, like

    when we click on + button it will assign "" (blank value to that array). and at each OnFocusOut function we are storing that value in corresponding array index.
    and when we click on - button, it will going to assign null value at that particular index of array.

    and at receiver end when we take value discard values who have null values

    one more thing when we click on + then also check array find first null value in array, and create according to that.

    the problem will be occurs only sequence of the list, but it does not matter coz client only able to see text-field, we dont show them an index number of it

    ReplyDelete
  5. Ple I want to digital number changing same like this but only numbering changing
    thanks rajani kanth

    ReplyDelete
  6. Hello
    How can i make limit for new fields

    ReplyDelete

Mohammad Khasim
Blogger | Web Developer
Hyderabad - INDIA
lessoncup@gmail.com

PHP | My SQL | JQUERY
Web Development Tools | CMS | Frameworks | SEO

Get my Latest Lessons