|
Mailing Lists
|
Home / Groups / Javascript
Need help to repeat dynamicly form fields onclick> > I have a form with 4+ input fields. > I need these 4+ fields to be repeated every time the user clicks "Add > Additional Topic(s)" > Here's a sample using jQuery. IMO, it's a bit cleaner to create the DOM elements as you need them rather than create a fixed number beforehand and hide them. It's fairly straightforward, and less code than it looks like (7 of the 20 lines of JS are comments for your benefit) :) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">; <html> <head> <title></title> <script src=" http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>; <script type="text/javascript"> $(function() { $('#btnAdd').click(function() { var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have var newNum = new Number(num + 1); // the numeric ID of the new input field being added // create the new element via clone(), and manipulate it's ID using newNum value var newElem = $('#input' + num).clone().attr('id', 'input' + newNum); // manipulate the name/id values of the input inside the new element newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum); // insert the new element after the last "duplicatable" input field $('#input' + num).after(newElem); // enable the "remove" button $('#btnDel').attr('disabled',''); // OPTIONALLY, assume you can only add 5 names if (newNum == 5) $('#btnAdd').attr('disabled','disabled'); }); $('#btnDel').click(function() { var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have $('#input' + num).remove(); // remove the last element // enable the "add" button $('#btnAdd').attr('disabled',''); // if only one element remains, disable the "remove" button if (num-1 == 1) $('#btnDel').attr('disabled','disabled'); }); $('#btnDel').attr('disabled','disabled'); }); </script> </head> <body> <form id="myForm"> <div id="input1" style="margin-bottom:4px;" class="clonedInput"> Name: <input type="text" name="name1" id="name1" /> </div> <div> <input type="button" id="btnAdd" value="add another name" /> <input type="button" id="btnDel" value="remove name" /> </div> </form> </body> </html> -- I have failed as much as I have succeeded. But I love my life. I love my wife. And I wish you my kind of success. |
February 12, 2012
|
Latest Fusion Authority Articles
|
|||||||||||||||||||||||||||||||||||||||||||||||||
