relCopy jQuery Plugin

How it works - $().relCopy();

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>

Options

Setup

Include Dependant JavaScripts

<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

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.

Andres Vidal © 2010 Found a bug?