Jquery Duplicate Fields Form Submit with PHP.
Wall Script
Follow Me:
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')");
}

}
}
?>
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


50 comments:

  1. very useful tnkx

    ReplyDelete
  2. Hello, Fantastic script....Chears..

    ReplyDelete
  3. 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.

    ReplyDelete
  4. @Sandis

    Use this code

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

    ReplyDelete
  5. Very usefull. Thanks

    ReplyDelete
  6. 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.

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

    ReplyDelete
  8. 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?

    ReplyDelete
  9. 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?

    ReplyDelete
  10. 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

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

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

    ReplyDelete
  13. Excellent!!! thanx sir

    ReplyDelete
  14. Thanks a lot, it is useful

    i will use this tehnique in polling engine,

    ReplyDelete
  15. Is there a way to add the new fields to validation?

    ReplyDelete
  16. hi Srinivas,

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

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

    ReplyDelete
  18. it's not working on tables:(

    ReplyDelete
  19. 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?

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

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

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

    ReplyDelete
  23. 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...

    ReplyDelete
  24. 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?

    ReplyDelete
  25. Hi, great script - thanks for sharing.

    Question - i want multiple fields to clone...

    plz suggest...

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

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

    ReplyDelete
  27. 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

    ReplyDelete
  28. 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.

    ReplyDelete
  29. how can you put validation on cloned fields.

    ReplyDelete
  30. Great code. Like Max Allan I use multiple values in each row. I have them duplicating but having trouble with the insertion into the MySQL database. Do you have an example with multiple values in each row? Thanks

    ReplyDelete
  31. Thanks! Really simple and useful! Works like a charm for me, even on tables! Thank you so much my friend! Keep posting

    @MCHS, just name your field like this: field_name[] . Pls note on the bracket []. That will put all entries on an array, so PHP can process them later on.

    On PHP, capture all arrays using JOIN function. So the entries will be saved to DB like this: JOHN,ANDREW,AHMAD,RONNIE,DONALD

    Hope this help :)

    ReplyDelete
  32. I want to add more filed in table example :$sql=mysql_query("insert into hobbies(hobby,hobby2,hobby3)values('$hobby'),'$hobby2','$hobby3'")

    ReplyDelete
  33. Has anybody figured out how to handle server-side (PHP) validation on dynamically added fields like this - specifically, how to show data entered by the user in the event an error is found.

    ReplyDelete
  34. I need your help bro. I have two input text field name and mobile which is duplicated as per your script, when i submit it is saving double entries in the database. I had changed the submit php page as follows:
    if(isset($_POST))
    {
    $array1=$_POST['name'];
    $array2=$_POST['mobile'];

    foreach (array_combine($array1, $array2) as $name => $mobile) {

    if(strlen($name)>0 && strlen($mobile)>0)
    {
    $sql1="insert into contacts(name,mobile)values('$name','$mobile')";
    $result=mysql_query($sql1);

    if ($result = mysql_query($sql1)) {
    echo "New contact $name added successfully!";
    }else{
    echo "New contact not added successfully!";
    }

    }else{
    echo "Name and mobile is empty";
    }

    }

    ReplyDelete
  35. i want add four fields at a time how can i

    ReplyDelete
  36. i want add four fields at a time how can i

    ReplyDelete
  37. it is just what i`m looking for!thanx!

    ReplyDelete
  38. Hello ;

    I've a stack of IP addresses I want provide in a select list. I'm wondering if I can reuse your script to allow the user to choose many IP in the stack. So Each time the user click on the add link, the select list is cloned but the IP already selected is not re-added into it. Can I achieve this with your script and if yes, how ?

    Thanks

    ReplyDelete
  39. really quick question:

    I am trying to add more form fields to form and if I submit the form with only fieldset, all of the data goes correctly into the DB, but if I try to add more than one field set, it is not putting the proper field values in the proper db row. I am assuming that it has to do with arrays, but I have banging my head for a few days now trying to get it to work.

    here is an snippet from my form:

    Bracket Name

    <1nput type="text" name="bracketName[]" class="input"/>


    Bracket Openings

    <1nput type="text" name="bracketOpenings[]" class="input"/>


    (the number '1's are there to allow me to post this)

    I have taken you code for the insert and added the appropriate MySQL commands.

    PHP sees each $bracketName accordingly, but the rest of the data is not assoc. with the $bracketName.

    any ideas?

    ReplyDelete
  40. hi, thank you for your post this is very useful, but i think i have the same question.

    i add another box, so i have firstname and lastname, when i submit this it goes to my mysql db, but when i add more as i click "add more" i only get one entry that goes to my mysql.

    this is in my insert.php

    $fname = mysql_real_escape_string($_POST['fname']);
    $lname = mysql_real_escape_string($_POST['lname']);
    $username = $_SESSION['username'];

    $sqlCommand = "INSERT INTO participants (username, fname, lname)
    VALUES('$username','$fname','$lname')";
    $query = mysql_query($sqlCommand) or die (mysql_error());

    ReplyDelete
  41. how to insert more fields into table synamically

    ReplyDelete
  42. http://jsfiddle.net/davidThomas/z3KkY/

    ReplyDelete
  43. got prob when want to add jquery date-picker.. in the clone field, the date-picker doesn't appeared..
    my brain already stuck to think the way to do it..

    ReplyDelete
  44. nice tutorial,

    can i add more fields?
    and insert in into the database?

    ReplyDelete
  45. how to validate the clone fields if these r empty or not

    ReplyDelete
  46. please i need to know it very urgently how to validate the clone files

    ReplyDelete
  47. It seems that the 'add' button doesn't work with my version of jquery, any different solution? I'm using jquery min v1.10.0

    ReplyDelete

Make in India