jqrelcopy Copies any DOM element and its children for usage in forms

  1. Notes
  2. Usage
  3. Usage with date/time picker
  4. Resources
  5. Changelog
  6. Similar extensions

This extension is for usage in forms to copy or clone input elements or other DOM elements.

This is a wrapper for the jQuery plugin: relCopy

It's similar to the extension jappendo but easier to use and more flexible. Every clone can be removed by adding a remove link or icon.


  • Cloning datepicker is available since v1.1. Don't forget to delete the assets folder of the widget when upgrading to the new version.

  • See multimodelform if you need this functionality for clientside cloning records with batchUpdate/Insert/Delete at the server side. This extension will do the workaround discussed below for you.


  • Extract the files under .../protected/extensions
  • Add the widget code somewhere in the view

The simplest usage:

			           'id' => 'copylink',
			           //'removeText' => 'remove' //uncomment to add remove link

All options:

 //the id of the 'Copy' link in the view, see below.
 'id' => 'copylink',
  //add a icon image tag instead of the text
  //leave empty to disable removing
 'removeText' => 'Remove',
 //htmlOptions of the remove link
 'removeHtmlOptions' => array('style'=>'color:red'),
 //options of the plugin, see http://www.andresvidal.com/labs/relcopy.html
 'options' => array(
	   //A class to attach to each copy
	  // The number of allowed copies. Default: 0 is unlimited
	  //Option to clear each copies text input fields or textarea
	  //A jQuery selector used to exclude an element and its children
	  //Additional HTML to attach at the end of each copy.
	  'append'=>CHtml::tag('span',array('class'=>'hint'),'You can remove this line'),

  • Add a 'Copy' link with the id, defined for the widget above. You have to add the attribute 'ref'. The value is a jquery-selector to define the element to copy. The code below will copy the div with the class 'copy'.
<a id="copylink" href="#" rel=".copy">Copy</a>

	<div class="row copy">
		<?php echo CHtml::label('Title',''); ?>
		<?php echo CHtml::textField('title[]','Title'); ?>
		<?php echo CHtml::textField('fld',"Don't copy",array('class'=>'skipcopy')); ?>

Usage with date/time picker

Widgets needs a javascript workaround on cloning. We have to assign the CJuiDatePicker functionality to the cloned new element.

Since v1.1 there are the properties jsBeforeClone,jsAfterClone,jsBeforeNewId,jsAfterNewId available where javascript code can be implemented. Use 'this' as the current jQuery object.

For CJuiDatePicker and the extension extension datetimepicker there are predefined functions available, so it's easy to make cloning date fields work.

Save the config of the in a variable in the view.

$datePickerConfig =  array('name'=>'dayofbirth',

You have to assign the javascript code to the property 'jsAfterNewId'.

      'id' => 'copylink',
      'removeText' => 'remove',
      //'jsBeforeNewId' => "alert(this.attr('id'));",
      //add the datapicker functionality to the cloned datepicker with the same options
      'jsAfterNewId' => JQRelcopy::afterNewIdDatePicker($datePickerConfig),

Support for 'datetimepicker' is analog (afterNewIdDateTimePicker).

For other widgets you have to find out the correct javascript code on cloning. Please let me know if you have found a javascript code for other widgets.

Note: I couldn't get Autocomplete working. Maybe one of you has an idea (see afterNewIdAutoComplete in JQRelcopy.php).


Projectpage of the jQuery plugin relCopy


  • v1.1 Added support for cloning date/time widgets
  • v1.1.1 chrome issue: removeAttr, see comment from 'jackfiallos' below

Similar extensions

10 0
3 556 downloads
Yii Version: 1.1
License: BSD-2-Clause
Category: User Interface
Tags: clone, form, jquery
Developed by: Joblo
Created on: Apr 7, 2011
Last updated: 12 years ago


show all

Related Extensions