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

  1. Requirements
  2. Installation
  3. Usage
  4. Parameters
  5. Change Log
  6. Resources

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

3 0
17 followers
1 145 downloads
Yii Version: Unknown
License: (not set)
Category: User Interface
Developed by: vzangloo
Created on: May 17, 2013
Last updated: 11 years ago

Downloads

show all

Related Extensions