9lessons programming blog
Loading Search
Friday, April 16, 2010

Jquery Duplicate Fields Form Submit with PHP.

How to submit jquery duplicate/clone field values to form with PHP. It's very basic level code, I had implemented this using relCopy.js jquery plugin to duplicating the existing field. I hope it's useful for you. Thanks!

jquery duplicate fields submit

Download Script     Live Demo

Javascript Code
Here input text name hobby[] is array.
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="reCopy.js"></script>
<script type="text/javascript">
$(function(){
var removeLink = ' <a class="remove" href="#" onclick="$(this).parent().slideUp(function(){ $(this).remove() }); return false">remove</a>';

$('a.add').relCopy({ append: removeLink});
});
</script>
//HTML code
<form method="post" action="clonesubmit.php">
<p class="clone"> <input type="text" name="hobby[]" class='input'/></p>
<p><a href="#" class="add" rel=".clone">Add More</a></p>
<input type="submit" value=" Submit " />
</form>



More information :relCopy jQuery Plugin

clonesubmit.php
Contains simple PHP Code that extracting array hobby[] values.
<?php
if($_POST['hobby'])
{
$array=$_POST['hobby'];
foreach($array as $hobby)
{

if(strlen($hobby)>0)
{
$sql=mysql_query("insert into hobbies(hobby)values('$hobby')");
}

}
}
?>
Sponsored Links

Share this post

Comments
{ 30 comments }
McBoudani said...

very useful tnkx

Sava Intl said...

Hello, Fantastic script....Chears..

Ajay said...

Excellent!!!

sandis MILOVIDOVS said...

That's very useful script. But how to add limit for duplicated fields. For example, I want to allow users create no more than 5 fields.

Srinivas Tamada said...

@Sandis

Use this code

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

Anonymous said...

Very usefull. Thanks

vicman said...

Hi, mi name is vicman, and this library is very usefull.
But I found several things to improve.

1-function callback when the re-copy operation has finished.

2-The radio button should not clear the value when it is duplicated.

Thanks.

David said...

I need to have each "clone" or "copy" input field have a different name. Like "input_1", and "input_2". Is this possible? Thanks.

Alexander said...

Great stuff!

Although if I have two individual forms on the same page, and click "Add More" on the second form, input's get added to the first form :(
How do I separate them?

Max Allan said...

I have a question, i use rows with 7 inputs on each row, it is possible to use this function to add a hole row and then post it into the Mysql?

pandu said...

wau , your script it's amaizing

mm this is how to insert data clone into database,how about if i want update data?? can you help me ^_^ btw tengs before

pandu said...

how about ,post this value from ajax?? can you explaine please ^_^

Anonymous said...

HOW CAN I PREVENT DUPLICATION OF INPUTS IN PHP.EXAMPLE IS NO DUPLICATION OF NAME??REPLY ASAP...TNX

Anonymous said...

Excellent!!! thanx sir

Anonymous said...

Thanks a lot, it is useful

i will use this tehnique in polling engine,

Saurabh Shukla said...

Is there a way to add the new fields to validation?

Bayu aji said...

hi Srinivas,

i found this snippet very useful, thanks.
but i found if i implement with jquery date picker, it won't duplicate.

boby said...

helo bro...
first thanks for the code..
but, how can we count 'how many field' in our form??
thanks..
reply as soon as posible

Anonymous said...

it's not working on tables:(

Anonymous said...

Hi, great script - thanks for sharing. Question - if I want to use animate({ opacity: "hide" }, "slow"); - as you do in several of your other scripts instead of the slideup - how should that look?

aMaddun said...

how if i want to use date picker? ive tried and it does not working.. can u help plz me. tx :)

Srinivas Tamada said...

@aMaddun

Use jquery live method

Anonymous said...

How can add numbering in each new item?
1. input
2. input
3. input

editor said...

Harika tam istedigim bir konu teşekkürler :)

Gilbert said...

I have been trying to find this for days. If i'm using a dynamic form like this one, how can I use PHP to get all the values submitted via e-mail? I can do it with a regular form but I have no idea of how to get the duplicates...

Thomas said...

I’m trying to add multiple cloned input boxes with another input all in the same table and same record; does anyone have any ideas?
Can I make it so the cloned input does something like cloning the fields as needed?

Dhawal said...

Hi, great script - thanks for sharing.

Question - i want multiple fields to clone...

plz suggest...

tried alot... didn't find nething... :(

marcelo said...

peace and quality, great script, i customize it to my code and works great. thanks a lot!!!

jihchuan said...

simple n nice script, but how to work with image input? (cz seems like I failed to do it, will try to debug it further..) tq

iain said...

Is it possible to add a delete confirm alert using jqury inlineconfirmation? I tried a couple of ways and see the confirm yes/no message, but it does the delete action anyway and deletes both the line and the confirmation text.

Post a Comment

Subscribe now!Recent Posts

Categories

Subscribe now!Popular Posts

People Says

@9lessons thank you for the great tutorials, we truly appreciate your contributions to the design community.

Smashing Magazine

Like Me

follow me
products

9lessons labs

9lessons clouds

Android application

Chrome Extension