Posted By

jillella on 06/15/11


Tagged

jquery


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

goliatone


jQuery - Dynamically Adding Form Elements


 / Published in: jQuery
 

URL: http://charlie.griefer.com/blog/index.cfm/2009/9/17/jQuery--Dynamically-Adding-Form-Elements

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2. "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5. <title></title>
  6. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
  7.  
  8. <script type="text/javascript">
  9. $(document).ready(function() {
  10. $('#btnAdd').click(function() {
  11. var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
  12. var newNum = new Number(num + 1); // the numeric ID of the new input field being added
  13.  
  14. // create the new element via clone(), and manipulate it's ID using newNum value
  15. var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);
  16.  
  17. // manipulate the name/id values of the input inside the new element
  18. newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);
  19.  
  20. // insert the new element after the last "duplicatable" input field
  21. $('#input' + num).after(newElem);
  22.  
  23. // enable the "remove" button
  24. $('#btnDel').attr('disabled','');
  25.  
  26. // business rule: you can only add 5 names
  27. if (newNum == 5)
  28. $('#btnAdd').attr('disabled','disabled');
  29. });
  30.  
  31. $('#btnDel').click(function() {
  32. var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
  33. $('#input' + num).remove(); // remove the last element
  34.  
  35. // enable the "add" button
  36. $('#btnAdd').attr('disabled','');
  37.  
  38. // if only one element remains, disable the "remove" button
  39. if (num-1 == 1)
  40. $('#btnDel').attr('disabled','disabled');
  41. });
  42.  
  43. $('#btnDel').attr('disabled','disabled');
  44. });
  45. </script>
  46. </head>
  47.  
  48. <body>
  49.  
  50. <form id="myForm">
  51. <div id="input1" style="margin-bottom:4px;" class="clonedInput">
  52. Name: <input type="text" name="name1" id="name1" />
  53. </div>
  54.  
  55. <div>
  56. <input type="button" id="btnAdd" value="add another name" />
  57. <input type="button" id="btnDel" value="remove name" />
  58. </div>
  59. </form>
  60.  
  61. </body>
  62. </html>

Report this snippet  

You need to login to post a comment.