Posted By

Shurik76 on 02/27/09


Tagged


Versions (?)

Add/Remove Form Fields


 / Published in: JavaScript
 

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

  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>

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: Ayjent on March 23, 2012

I'm not very experienced with JavaScript, but this code was similar to what I was looking for, especially where it includes the 'Remove Field' link. However, I would like the additional fields to generate with the 'Remove Link' code, not just the ones with code in the script. I understand that the custom functions have to be adjusted to include that behavior, but am having all kinds of trouble trying to get that function to work. It seems straightforward to do it in the older method following the "} else {" at the bottom of the addField function by editing the code to read:

} else { //Older Method
    field_area.innerHTML += "<li><a>Remove Field</a></li>";
}

However, I'm stumped as to how to include it in the W3C DOM method?

You need to login to post a comment.