Add/Remove Form Fields


/ Published in: JavaScript
Save to your folder(s)



Copy this code and paste it in your HTML
  1. <script language="Javascript" type="text/javascript">
  2. <!--
  3. //Add more fields dynamically.
  4. function addField(area,field,limit) {
  5. if(!document.getElementById) return; //Prevent older browsers from getting any further.
  6. var field_area = document.getElementById(area);
  7. var all_inputs = field_area.getElementsByTagName("input"); //Get all the input fields in the given area.
  8. //Find the count of the last element of the list. It will be in the format '<field><number>'. If the
  9. // field given in the argument is 'friend_' the last id will be 'friend_4'.
  10. var last_item = all_inputs.length - 1;
  11. var last = all_inputs[last_item].id;
  12. var count = Number(last.split("_")[1]) + 1;
  13.  
  14. //If the maximum number of elements have been reached, exit the function.
  15. // If the given limit is lower than 0, infinite number of fields can be created.
  16. if(count > limit && limit > 0) return;
  17.  
  18. if(document.createElement) { //W3C Dom method.
  19. var li = document.createElement("li");
  20. var input = document.createElement("input");
  21. input.id = field+count;
  22. input.name = field+count;
  23. input.type = "text"; //Type of field - can be any valid input type like text,file,checkbox etc.
  24. li.appendChild(input);
  25. field_area.appendChild(li);
  26. } else { //Older Method
  27. field_area.innerHTML += "<li><input name='"+(field+count)+"' id='"+(field+count)+"' type='text' /></li>";
  28. }
  29. }
  30. //-->
  31. </script>
  32.  
  33. //=============================
  34. // HTML CODE
  35. //=============================
  36.  
  37. <form name="frm" method="POST">
  38. <strong>Friends List</strong><br />
  39. <ol id="friends_area">
  40. <li><input type="text" name="friend_1" id="friend_1" /></li>
  41. <li><input type="text" name="friend_2" id="friend_2" /></li>
  42. <li><input type="text" name="friend_3" id="friend_3" /></li>
  43. <li><input type="text" name="friend_4" id="friend_4" /></li>
  44. <li><input type="text" name="friend_5" id="friend_5" /></li>
  45. </ol>
  46. <input type="button" value="Add Friend Field" onclick="addField('friends_area','friend_',10);" />
  47.  
  48. <strong>Enemies List</strong><br />
  49. <ol id="enemies_area">
  50. <li><input type="text" name="enemy_1" id="enemy_1" /></li>
  51. <li><input type="text" name="enemy_2" id="enemy_2" /></li>
  52. <li><input type="text" name="enemy_3" id="enemy_3" /></li>
  53. <li><input type="text" name="enemy_4" id="enemy_4" /></li>
  54. <li><input type="text" name="enemy_5" id="enemy_5" /></li>
  55. </ol>
  56. <input type="button" value="Add Friend Field" onclick="addField('enemies_area','enemy_',0);" />
  57.  
  58. <strong>Neutral List</strong><br />
  59. <ol id="neutrals_area">
  60. <li><input type="text" name="neutral_1" id="neutral_1" /> <a style="cursor:pointer;color:blue;" onclick="this.parentNode.parentNode.removeChild(this.parentNode);">Remove Field</a></li>
  61. <li><input type="text" name="neutral_2" id="neutral_2" /> <a style="cursor:pointer;color:blue;" onclick="this.parentNode.parentNode.removeChild(this.parentNode);">Remove Field</a></li>
  62. <li><input type="text" name="neutral_3" id="neutral_3" /> <a style="cursor:pointer;color:blue;" onclick="this.parentNode.parentNode.removeChild(this.parentNode);">Remove Field</a></li>
  63. <li><input type="text" name="neutral_4" id="neutral_4" /> <a style="cursor:pointer;color:blue;" onclick="this.parentNode.parentNode.removeChild(this.parentNode);">Remove Field</a></li>
  64. <li><input type="text" name="neutral_5" id="neutral_5" /> <a style="cursor:pointer;color:blue;" onclick="this.parentNode.parentNode.removeChild(this.parentNode);">Remove Field</a></li>
  65. </ol>
  66. <input type="button" value="Add Neutral Field" onclick="addField('neutrals_area','neutral_',0);" />
  67. </form>

URL: http://www.openjs.com/scripts/examples/addfield.php

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.