jQuery Duplicate Fields Form Submit with PHP

Few days ago I am searching for jQuery plugin to use in my up coming HTML website and I found this great plugin on how to duplicate fields in just few line of codes and I want to share this with you.

In this article you will know on how to duplicate fields using .relCOpy jQuery plugin, you don’t need to study and take time to read any javascript tutorials just for nothing, here you can follow this step by step easily.

HTML Code

Here input text name[] is an array

rel=".clone" is the class name of the field to clone or copy.

<form action="process.php" method="post">
<p class="clone">
	<label> Name: </label>
	<input type="text" name="name[]" />
</p>
<p><a href="#" class="name" rel=".clone">Add Name</a></p>
<p><input type="submit" value="Submit" /></p>
</form>

Javascript Code

$('a.name') is the class name of Add Name button.

jQuery(document).ready(function($){
   var removeName = '<a href="#" onClick="$(this).parent().slideUp(
   function(){$(this).remove()}); return false">remove</a>';
$('a.name').relCopy({append:removeName});
});

Copy Limit

To limit how many fields to copy (e.g. 4 and a total of 5 fields) just edit the anchor above code to this

$('a.copy').relCopy({limit: 5, append: removeLink});

For more Information on relCOpy jQuery Plugin :relCopy

process.php

I am using foreach PHP function to extract name[] array

$names = $_POST['name'];
if(isset($names)) {
foreach($names as $name) {
	if(strlen($name)>0) {
			$sql=mysql_query("INSERT INTO tbl_name(name) VALUES ('$name')");
		} else {
			echo 'Oops no value to be inserted.';
		}
	}
}

Happy Coding ^_^, share your idea below.