Today, I am going to share with you that how to copy data or make clone from any div to copy it another field. You can use it to add data from one field to another field using javascript, jquery has a function name clone that can create specific field data clone exactly same like original.
Here I will show to how jquery clone() function works and how to use it.
By using clone() function in jquery you can create clone in HTML. You can copy html data from one place to another place.
Often when creating a form on a web page, you need your customers to fill out a field such as a mailing address, as well as a billing address. Instead of having your customers fill out the form twice, you can use JavaScript to copy the form’s data from one field to another.
This is How you can use JavaScript To Copy Text From One Field To Another.
JavaScript :-
|
1 2 3 4 5 6 7 8 9 |
$(document).ready(function() { // here on button click div1 data will be cloned and copied to another div as you can see in code given below $('.copy').click(function() { $('.div1').clone().appendTo('.div2'); }) }); |
Html :-
|
1 2 3 4 5 6 7 8 9 |
<div class="div1">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div> <div class="div2"> </div> <br> <!-- On clicking of this button clone will be created and clone data will append to assigned div --> <button class="copy">Copy Data</button> <!-- this button will created a simple refresh action using anchor tag to reset a all action perform --> <a href="javascript:window.location.href=window.location.href"><button class="reset">Reset Data</button></a> |