recopy

Extension for duplicate form fields, or any DOM element and its children
19 followers

Duplicate form fields, using jQuery relCopy plugin version 1.1.0 from Andres Vidal.

relCopy, short for rel copy, is a jQuery plugin that copies any DOM element, and its children, targeted by an action link's rel tag. It is typically used in forms to copy the file upload fields for multiple file uploads. It can also be customized for any purpose that requires multiple copies of fields with limits and other features.

Requirements

  • jQuery
  • Yii 1.1 or above

Installation

  • Extract 'reCopy' folder to protected/extensions/widgets.

Usage

Call this widget in the view file, as in the examples, where this widget itself will display the 'add more' link text.

Example 1

<p class="clone">
  First name: <input type="text" name="firstname[]" class='input'/>
  Last name: <input type="text" name="lastname[]" class='input'/>
</p>
 
<?php 
  $this->widget('ext.widgets.reCopy.ReCopyWidget', array(
     'targetClass'=>'clone',
  )); 
?>

Example 2: Customization

<div class="clone-this">
  First name: <input type="text" name="firstname[]" class='input'/>
  Last name: <input type="text" name="lastname[]" class='input'/>
  Gender: <select name="gender[]">
             <option value="male">Male</option>
             <option value="female">Female</option>
          </select>
</div>
 
<?php 
  $this->widget('ext.widgets.reCopy.ReCopyWidget', array(
     'targetClass'=>'clone-this',
     'addButtonLabel'=>'Add new',
     'addButtonCssClass'=>'add-clone',
     'removeButtonLabel'=>'Remove this',
     'removeButtonCssClass'=>'remove-clone',
     'limit'=> 5,
  )); 
?>

Example 3: Multiple widget call per page

Assign each widget call with unique 'targetClass' and 'addButtonId'.

<p class="education-history">
  School attended: <input type="text" name="school[]" class='input'/>
  Year: <input type="text" name="school_year[]" class='input'/>
</p>
 
<?php 
  $this->widget('ext.widgets.reCopy.ReCopyWidget', array(
     'targetClass'=>'education-history',
     'addButtonId'=>'add-new-education',
     'limit'=>3,
  )); 
?>
 
<p class="qualification">
  Certificate: <input type="text" name="certificate[]" class='input'/>
  Year: <input type="text" name="cert_year[]" class='input'/>
</p>
 
<?php 
  $this->widget('ext.widgets.reCopy.ReCopyWidget', array(
     'targetClass'=>'qualification',
     'addButtonId'=>'add-new-qualification',
     'removeButtonLabel'=>'Remove this',
     'removeButtonCssClass'=>'remove-clone',
     'limit'=>5,
  )); 
?>

Parameters

  • targetClass: Targeted CSS class for duplication.
  • limit: The number of allowed copies. Default: 0 is unlimited
  • addButtonId (>= v1.0.3): Add button id. Set id differently if this widget is called multiple times per page.
  • addButtonLabel: Add more button text.
  • addButtonCssClass: Add more button CSS class.
  • removeButtonLabel: Remove button text.
  • removeButtonCssClass: Remove button CSS class.
  • excludeSelector: A jQuery selector used to exclude an element and its children. Example: ".exclude"
  • copyClass: A class to attach to each copy. Default: "copy"
  • clearInputs: Boolean option to clear each copies text input fields or textarea. Default: true.

Change Log

Version 1.0.3

  • Bug fixed: multiple widget call per page doesn't work.
  • Added param 'addButtonId' to handle multiple widget call per page.

Version 1.0.2

  • Hide 'add more' link button when limit = 1
  • Bug fixed: clearInputs=false is not working.

Version 1.0.1

  • Added relCopy.js minified version.
  • Added other useful params: limit, excludeSelector, copyClass, clearInputs.

Version 1.0

  • Initial release.

Resources

Total 13 comments

#15335 report it
masdib.banget at 2013/10/30 03:59am
timepicker with yiibooster?

How use recopy for timepicker ???

#14154 report it
rajesh chaurasia at 2013/07/23 06:40am
reCopy

nice extension its working great. thanks.

#13454 report it
vzangloo at 2013/05/29 10:59am
Re: validation

Yii native validation will not work on submitted array, you have to write your own custom validator.
http://www.yiiframework.com/wiki/168/create-your-own-validation-rule/

#13452 report it
vzangloo at 2013/05/29 10:52am
Re: How does it differ from the jqrelcopy extension?

Just different approach to implement the relCopy into Yii extensions. The outcome should be same. However, facing the same issue where cloned CMultiFileUpload, CJuiDatePicker and other CJui* class cannot work properly, because their JQuery selector is fixed.

Example:
Calling CJuiDatePicker will generate the fixed id #User_dob in the script
HTML: <input id="User_dob" ...
Script: jQuery('#User_dob').datepicker({..})

Cloned fields will have the cloned index append its input field id
HTML: <input id="User_dob2" ...
HTML: <input id="User_dob3" ...
HTML: <input id="User_dob*" ...

Suggestion:
Extends CJuiDatePicker and overwrite its run() method to generate
Script: jQuery('[id^="User_dob]"').datepicker({..})

#13446 report it
PrplHaz4 at 2013/05/29 08:39am
How does it differ from the jqrelcopy extension?

Can you help us understand what is different from this extension? JqRelCopy

Thanks!!

#13438 report it
hiral darji at 2013/05/29 05:36am
validation

what about field validation?

its not working with this extension.

#13272 report it
v_bogdan at 2013/05/20 02:39am
stylized elements

this extension cannot be use with stylized file input elements, becuase name of file will be displaying only at first elem.

#13251 report it
vzangloo at 2013/05/17 07:58pm
Thanks for the compliments

Thanks to schmunk and PeRoChAk.

#13249 report it
schmunk at 2013/05/17 12:09pm
Thank you for refactoring

and I gave you the promised +1 :)

#13245 report it
PeRoChAk at 2013/05/17 07:15am
Nice work

Very nice work...

Thanks

#13243 report it
schmunk at 2013/05/17 07:01am
One more thing...

Your repo contains the folders protected/extensions/widget, which is kind of an overhead. Although you can still import the full path or set an alias in your config, it would be nicer, if the widget would be placed less deep in the repo. What do you think?

#13242 report it
vzangloo at 2013/05/17 06:39am
Git Hub repo is ready

Hi schmunk, thanks for the comment, the git hub repository of this extension is at https://github.com/vzangloo/Yii-Extension-ReCopy

#13240 report it
schmunk at 2013/05/17 03:40am
Would give +1, if...

you had a github repo with composer.json file ;)

Very nice work.

Leave a comment

Please to leave your comment.

Create extension