GOOCODE - Find your code/scripts

50 When we submit the form, sometimes you encounter the need to repeat the same form to add multiple elements, such as order information you need to add a number of different types of products, form data in the new field information. This time we can put a "new one" or "Copy" button directly on the form, you can achieve copy form elements by clicking on the button.


HTML
In this article we copy a simple plug-in jQuery based elements introduced by way of example, by calling the plug-in element easily copy function.
First, load the jQuery library file and copy the plug element duplicateElement.min.js.

<script src="jquery.js"></script> 
<script src="duplicateElement.min.js"></script> 

We assume that you want to copy user information element, forms html structure is as follows:

<form id="myform" name="myform" action="post.php" method="post">
	<fieldset id="additional">
		<label for="name">Name: </label><input id="name" name="name[]" type="text" class="input" >
		<label for="flag">Level: </label>
		<select id="flag" name="flag[]">
			<option disabled="" selected="">Select</option>
			<option value="1">VIP</option>
			<option value="2">VIP2</option>
		</select>
		&nbsp;
		<a href="javascript:void(0);"  class="btn remove">Remove</a>
		<a href="javascript:void(0);"  class="btn create">Copy</a>
	</fieldset>
	
	<br/>
	<div class="sub_btn">
		<input type="submit" class="button" value="Submit">
	</div>
</form>

jQuery
We click on the "Copy" button, the contents of the #additional copy, the equivalent of a new row, the initial display when only the "copy" button to copy after the original piece will show "Remove" button, click "remove" to remove the corresponding row can be.

    $(function () { 
        $('#additional').duplicateElement({ 
            "class_remove": ".remove", 
            "class_create": ".create", 
            onCreate: function (el) { 
                el.find("select").prop('defaultSelected'); 
                el.find(".input").val(''); 
            } 
        }); 
    }); 

We can also add callback() function to define attributes new form elements after succeeded copying, such as form elements value or style and so on through onCreate.