├── .gitignore
├── .gitattributes
├── README.md
├── jscripts
    ├── duplicateFields.min.js
    └── duplicateFields.js
└── index.html


/.gitignore:
--------------------------------------------------------------------------------
1 | nbproject/


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
 1 | # Auto detect text files and perform LF normalization
 2 | * text=auto
 3 | 
 4 | # Custom for Visual Studio
 5 | *.cs     diff=csharp
 6 | 
 7 | # Standard to msysgit
 8 | *.doc	 diff=astextplain
 9 | *.DOC	 diff=astextplain
10 | *.docx diff=astextplain
11 | *.DOCX diff=astextplain
12 | *.dot  diff=astextplain
13 | *.DOT  diff=astextplain
14 | *.pdf  diff=astextplain
15 | *.PDF	 diff=astextplain
16 | *.rtf	 diff=astextplain
17 | *.RTF	 diff=astextplain
18 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ## Installation
 2 | 
 3 | Include script *after* the jQuery library:
 4 | 
 5 | 	<script src="/path/to/duplicateElement.min.js"></script>
 6 | 
 7 | ## Usage
 8 | 	Basic:
 9 | 		<script>
10 |             $(function () {
11 | 				// Dublicate target
12 |                 $('#additional-field-model').duplicateElement({
13 | 					// Create/Remove buutons in target
14 |                     "class_remove": ".remove-this-field",
15 |                     "class_create": ".create-new-field"
16 |                 });
17 |             });
18 |         </script>
19 | 		
20 | 	With callback:
21 | 		<script>
22 | 		$(function () {
23 | 		    $('#additional-field-model').duplicateElement({
24 | 	        class_remove: ".remove-this-field",
25 | 	        class_create: ".create-new-field",
26 | 	        onCreate: function (el) {
27 | 				// Reseting values 
28 | 	            el.find("select").prop('defaultSelected');
29 | 		    /* 
30 | 		    for newer jquery use:
31 | 			el.find("select option").prop('selected', function () {
32 |                  		return $(this).prop('defaultSelected');
33 |             		});
34 | 		    */
35 | 	            el.find("input").val('');
36 | 	            el.find(".module-price").text('00');
37 | 	        }
38 |  		});
39 | 	</script>
40 | 		
41 | 	
42 | 		
43 | ## Description
44 | Very simple script to dublicate and remove your elements in HTML. Can be used in form fieldsets.
45 | 
46 | 
47 | 
48 | 
49 | ## [ Demo ](http://fire1.github.io/DuplicateElement/)
50 | 
51 | 
52 | 


--------------------------------------------------------------------------------
/jscripts/duplicateFields.min.js:
--------------------------------------------------------------------------------
 1 | /*!
 2 |  * Copyright (C) 2015 Angel Zaprianov <me@fire1.eu>
 3 |  *
 4 |  * This program is free software: you can redistribute it and/or modify
 5 |  * it under the terms of the GNU General Public License as published by
 6 |  * the Free Software Foundation, either version 3 of the License, or
 7 |  * (at your option) any later version.
 8 |  *
 9 |  * This program is distributed in the hope that it will be useful,
10 |  * but WITHOUT ANY WARRANTY; without even the implied warranty of
11 |  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
12 |  * GNU General Public License for more details.
13 |  *
14 |  * You should have received a copy of the GNU General Public License
15 |  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
16 |  * Duplicate Fields version: 1.1.2
17 |  */
18 | !function(e){e.fn.duplicateElement=function(n){function t(e){e=e.parent(),e.find(n.class_remove).show(),e.find(n.class_remove).last().hide(),e.find(n.class_create).hide(),e.find(n.class_create).last().show()}function i(e,n){a(n),e.parent().append(n)}function a(a){console.log(a),a.find(n.class_create).unbind(),a.on("click",n.class_create,function(c){var l,o=e(this).parent(".dinamic-field"),r=e(this).parent();return o.length>0?l=o.clone():r.length>0&&(l=a.clone().addClass("dinamic-field")),i(a,l),s(a),"function"==typeof n.onCreate&&n.onCreate(l,e(this),c),t(a),c.preventDefault(),!1})}function s(i){i.on("click",n.class_remove,function(a){var s=e(this).parents(".dinamic-field"),c=e(this).parents(i);return s.length>0?s.remove():c.length>0&&(i.empty(),i.hide(),i.remove()),"function"==typeof n.onRemove&&n.onRemove(e(this)),t(i),a.preventDefault(),!1})}n=e.extend(e.fn.duplicateElement.defaults,n);var c=this;e(c).parent();return this.each(function(){var i=e(this);t(i),a(i),i.find(n.class_remove).first().hide(),s(i)})},e.fn.duplicateElement.defaults={tag_name:"div",tag_id:"#dinamic-fields",clone_model:"#clone-field-model",class_remove:".remove-this-fields",class_create:".create-new-fields",onCreate:"",onRemove:""}}(jQuery);


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <!--
  3 | Demo file for duplicate Fields js
  4 | -->
  5 | <html>
  6 |     <head>
  7 |         <title>Duplicate element</title>
  8 |         <meta charset="UTF-8">
  9 |         <meta name="viewport" content="width=device-width, initial-scale=1.0">
 10 | 
 11 |         <!-- Font Awesome -->
 12 |         <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
 13 | 
 14 |         <!-- Latest compiled and minified CSS -->
 15 |         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
 16 | 
 17 |         <!-- Optional theme -->
 18 |         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
 19 |         <link rel="stylesheet" href="http://getbootstrap.com/examples/sticky-footer/sticky-footer.css">
 20 | 
 21 |         <!-- Latest jQuery -->
 22 |         <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
 23 |         <!-- Latest compiled and minified JavaScript -->
 24 |         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
 25 |         <script src="http://getbootstrap.com/assets/js/ie10-viewport-bug-workaround.js"></script>
 26 |         <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
 27 | 
 28 |         <script src="jscripts/duplicateFields.min.js" type="text/javascript"></script>
 29 |         <script  type="text/javascript">
 30 |             $(function () {
 31 |                 $('#additional-field-model').duplicateElement({
 32 |                     "class_remove": ".remove-this-field",
 33 |                     "class_create": ".create-new-field"
 34 |                 });
 35 |             });
 36 |         </script>
 37 |     </head>
 38 |     <body>
 39 |         <section>
 40 |             <div class="container">
 41 |                 <div class="page-header">
 42 |                     <h1>Duplicate Element</h1>
 43 |                 </div>
 44 |                 <p class="lead">Simple jQuery pugin for duplicating elements.</p>
 45 | 
 46 |                 <form name="demo">
 47 |                     <fieldset>
 48 |                         <div class="form-group">
 49 |                             <label class="col-md-12 control-label" for="static-a">Static field</label>
 50 |                             <div class="col-md-12">
 51 |                                 <input id="static-a" name="static-a" type="text"  class="form-control input-md" />
 52 |                             </div>
 53 |                         </div>
 54 |                     </fieldset>
 55 |                     <br />
 56 |                     <fieldset id="additional-field-model">
 57 |                         <div class="form-group">
 58 |                             <div class="col-md-6 col-sm-12">
 59 |                                 <label class="col-md-12 control-label" for="field-a">Field A</label>
 60 |                                 <div class="input-group">
 61 |                                     <select id="field-a" name="field-a"   class="form-control input-md"  required="">
 62 |                                         <option disabled="" selected="">Select ...</option>
 63 |                                         <option>Option A</option>
 64 |                                         <option>Option B</option>
 65 |                                         <option>Option C</option>
 66 |                                         <option>Option D</option>
 67 |                                     </select>
 68 |                                     <span class="input-group-addon"> Help text</span>
 69 |                                 </div>
 70 |                             </div>
 71 |                             <div class="col-md-2 col-xs-5">
 72 |                                 <label class="col-md-12 control-label" for="field-b">Field A</label>
 73 |                                 <div class="input-group">
 74 |                                     <input id="field-b" name="field-b" type="text" placeholder="field b" class="form-control input-md" value="" required="">
 75 |                                 </div>
 76 |                             </div>
 77 |                             <div class="col-md-4 col-xs-7 text-right">
 78 |                                 <label class="col-xs-12 control-label" for="field-c"><br /></label>
 79 |                                 <a href="javascript:void(0);"  class="btn btn-warning remove-this-field">
 80 |                                     <i class="fa fa-remove"></i>
 81 |                                     <span class="hidden-xs"> Delete </span>
 82 |                                 </a>
 83 |                                 <a href="javascript:void(0);"  class="btn btn-success create-new-field">
 84 |                                     <i class="fa fa-plus"></i>
 85 |                                     <span class="hidden-xs"> Duplicate </span>
 86 |                                 </a>
 87 |                             </div>
 88 |                         </div>
 89 |                     </fieldset>
 90 |                     <br />
 91 |                 </form>
 92 |             </div>
 93 |         </section>
 94 |         <footer class="footer">
 95 |             <div class="container">
 96 |                 <p class="text-muted">Author: <a href="//fire1.eu/" target="_blank">fire1</a>.</p>
 97 |             </div>
 98 |         </footer>
 99 |     </body>
100 | </html>
101 | 


--------------------------------------------------------------------------------
/jscripts/duplicateFields.js:
--------------------------------------------------------------------------------
  1 | /*!
  2 |  * Copyright (C) 2015 Angel Zaprianov <me@fire1.eu>
  3 |  *
  4 |  * This program is free software: you can redistribute it and/or modify
  5 |  * it under the terms of the GNU General Public License as published by
  6 |  * the Free Software Foundation, either version 3 of the License, or
  7 |  * (at your option) any later version.
  8 |  *
  9 |  * This program is distributed in the hope that it will be useful,
 10 |  * but WITHOUT ANY WARRANTY; without even the implied warranty of
 11 |  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 12 |  * GNU General Public License for more details.
 13 |  *
 14 |  * You should have received a copy of the GNU General Public License
 15 |  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 16 |  * Duplicate Fields version: 1.1.2
 17 |  */
 18 | 
 19 | (function ($) {
 20 |     $.fn.duplicateElement = function (options) {
 21 |         options = $.extend($.fn.duplicateElement.defaults, options);
 22 |         var main = this;
 23 |         var $main = $(main).parent();
 24 | 
 25 |         function handleNavigationButtons(ElementTarget) {
 26 |             ElementTarget = ElementTarget.parent();
 27 |             ElementTarget.find(options.class_remove).show();
 28 |             ElementTarget.find(options.class_remove).last().hide();
 29 |             ElementTarget.find(options.class_create).hide();
 30 |             ElementTarget.find(options.class_create).last().show();
 31 |         }
 32 | 
 33 |         /**
 34 |          * Generate new element
 35 |          * @param target
 36 |          * @param newElement
 37 |          */
 38 |         function createElement(target, newElement) {
 39 |             clickNewExecutor(newElement);
 40 |             target.parent().append(newElement);
 41 |         }
 42 | 
 43 | 
 44 |         /**
 45 |          * Generate new fild on click
 46 |          * @param ElementTarget
 47 |          */
 48 |         function clickNewExecutor(ElementTarget) {
 49 |             console.log(ElementTarget);
 50 |             ElementTarget.find(options.class_create).unbind();
 51 |             ElementTarget.on("click", options.class_create, function (event) {
 52 |                 var newElement,
 53 |                     isGenerate = $(this).parent(".dinamic-field"),
 54 |                     isStatic = $(this).parent();
 55 |                 if (isGenerate.length > 0) {
 56 |                     //console.log('generated');
 57 |                     newElement = isGenerate.clone();
 58 |                 } else if (isStatic.length > 0) {
 59 |                     //console.log($(main));
 60 |                     newElement = ElementTarget.clone().addClass("dinamic-field");
 61 |                 }
 62 |                 //
 63 |                 // Handle view of buttons
 64 |                 createElement(ElementTarget, newElement);
 65 |                 //
 66 |                 // Add remove listener
 67 |                 clickRemoveExecutor(ElementTarget);
 68 |                 //
 69 |                 // Callback function on create
 70 |                 if (typeof options.onCreate === "function") {
 71 |                     options.onCreate(newElement, $(this), event);
 72 |                 }
 73 |                 //
 74 |                 // Manage buttons
 75 |                 handleNavigationButtons(ElementTarget);
 76 |                 //
 77 |                 // Prevent Default
 78 |                 event.preventDefault();
 79 |                 return false;
 80 |             });
 81 |         }
 82 | 
 83 |         function clickRemoveExecutor(ElementTarget) {
 84 |             ElementTarget.on("click", options.class_remove, function (event) {
 85 |                 var isGenerate = $(this).parents(".dinamic-field");
 86 |                 var isStatic = $(this).parents(ElementTarget);
 87 |                 if (isGenerate.length > 0) {
 88 |                     isGenerate.remove();
 89 |                 } else if (isStatic.length > 0) {
 90 |                     ElementTarget.empty();
 91 |                     ElementTarget.hide();
 92 |                     ElementTarget.remove();
 93 |                 }
 94 |                 //
 95 |                 // Callback function on remove
 96 |                 if (typeof options.onRemove === "function") {
 97 |                     options.onRemove($(this));
 98 |                 }
 99 |                 //
100 |                 // Manage buttons
101 |                 handleNavigationButtons(ElementTarget);
102 |                 //
103 |                 // Prevent Default
104 |                 event.preventDefault();
105 |                 return false;
106 |             });
107 |         }
108 | 
109 |         return this.each(function () {
110 |             var target = $(this);
111 |             handleNavigationButtons(target);
112 |             //
113 |             // Generate new field on click
114 |             clickNewExecutor(target);
115 |             //
116 |             // Hide remove button
117 |             target.find(options.class_remove).first().hide();
118 |             //
119 |             // Remove operation
120 |             clickRemoveExecutor(target)
121 | 
122 |         });
123 |     };
124 |     //
125 |     // Set up the default options.
126 |     $.fn.duplicateElement.defaults = {
127 |         tag_name: 'div',
128 |         tag_id: "#dinamic-fields",
129 |         clone_model: "#clone-field-model",
130 |         class_remove: ".remove-this-fields",
131 |         class_create: ".create-new-fields",
132 |         onCreate: "",
133 |         onRemove: ""
134 |     };
135 | })(jQuery);


--------------------------------------------------------------------------------