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.
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
Live Demo
Download Script
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 boxnow 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>
great post :)
ReplyDeletethis will create duplicate instances. Follow the steps:
ReplyDelete-> 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.
nice
DeleteI want to report a bug, if you add 5 fields, then remove first 2 then it will again start from 2 3 4 5...
ReplyDeletelike 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
Mohsin Chaudhari what is your solution?
ReplyDeleteI think we need to create array and store that values in array, like
ReplyDeletewhen 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
Ple I want to digital number changing same like this but only numbering changing
ReplyDeletethanks rajani kanth
thank bro
ReplyDeleteHello
ReplyDeleteHow can i make limit for new fields
Totally unique stuff is here really amazing!!!
ReplyDeleteUI UX consulting