How it works | Setup | Examples | Source Download | Changelog | jQuery Project | Back to Labs

relCopy

current release: v1.1.0

How it works - $(selector).relCopy({options});

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.

Call $(selector).relCopy(options) on an element with a jQuery type selector defined in the attribute rel tag. This defines the DOM element to copy.

In the example below, .phone in rel=".phone"is the selector jQuery will use to search the DOM and copy. Note: This can be any jQuery selector like #phone.

$('a.copy').relCopy({limit: 5}); // <a href="example.com" class="copy" rel=".phone">Copy Phone</a>
relCopy Properties
Arguments Type Description
excludeSelector string A jQuery selector used to exclude an element and its children.
limit integer The number of allowed copies, including original element. Default: 0 is unlimited.
append string HTML to attach at the end of each copy. Great for an HTML "remove link."
copyClass string A class to attach to each copy.
clearInputs boolean Option to clear each copies text input fields or textarea.

Setup

Include Dependencies

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery/relCopy.jquery.js"></script>

Call $().relCopy() on elements when DOM is ready

<script>
$(function(){
  $('a.copy').relCopy();
});
</script>

Examples

Sample HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Rel Copy Example</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery/relCopy.jquery.js"></script>
<script>
$(function(){
   $('a.copy').relCopy();	
});
</script>
</head>
<body>
   <p><a href="#" class="copy" rel=".phone">Copy Phone</a></p>
   <p class="phone"><label>Phone Number: <input type="text" /></label></p>
</body>
</html>

1. Basic Example - Default Settings

JavaScript

$('a.copy').relCopy();

Copy Phone

2. Example with an animated "remove" link and a 2 copy limit (3 total)

JavaScript

var removeLink = ' <a class="remove" href="#" onclick="$(this).parent().slideUp(function(){ $(this).remove() }); return false">remove</a>';
$('a.copy').relCopy({limit: 3, append: removeLink});

Copy Phone

3. Example without the remove link animation and a 4 copy limit (5 total)

JavaScript

var removeLink = ' <a class="remove" href="#" onclick="$(this).parent().remove(); return false">remove</a>';
$('a.copy').relCopy({limit: 5, append: removeLink});

Copy Phone

Latest Source

Changelog

Documentation was last modified on 25 October 2011 at 11:51 PM
25.02.2010 Version 1.1.0
Fixed functionality that properly clears all input and textarea element types when using the option clearInputs.
Fixed an issue with Safari 3 and multiple selectors that gives this error "INVALID_NODE_TYPE_ERR: DOM Range Exception 2"
25.02.2010 Version 1.0.2
Fixed functionality to clear all input and textarea types when using the option clearInputs.
15.12.2009 Version 1.0.1
Fixed and issue with the default remove link. It caused errors when duplicating input elements directly. The html for this link should be added through the append option.
15.12.2009 Version 1.0.0
Initial release.