How to clone or duplicate fields using jquery?

Question

How to clone or duplicate fields using jquery?

I have this markup

<div class="input text"> <label for="Experience0ExperienceContent">Experience Content</label> <input name="data[Experience][0][experience_content]" class="span3" id="Experience0ExperienceContent" type="text"> </div>

Is it possible to clone or duplicate it by increasing the value 0 every time the user clicks on the link? I mean all 0, when the user clicks once on the link to go to 1, and then click again you need to go to 2 and so on and, of course, maintain the same markup every time, any tips or help?

Greetings and thanks in advance

+6

javascript jquery html

ReynierPM Feb 25 '12 at 4:36

source share

3 answers

First of all, give it an identifier for better selector performance, I assume that it is foo for the link, bar for the field:

 function buildId(id) { return 'data[Experience][' + id + '][experience_content]'; } jQuery('#foo').click((function () { var i = 0; return function () { var $bar = jQuery('#bar'); $bar .clone() .attr('id', buildId(i++)) .insertAfter($bar); }; })());

Check the jQuery API for the methods used.

+1

JulioC Feb 25 '12 at 4:45

source share

You can use the jquery clone () method and then get the name of the actual element and then update the name of the new element. Read here for more

Here is an example

  <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Single page template</title> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> </head> <body> <a href="#" id="cloneme" name="cloneme">Clone Me</a> <div class="input text"> <label for="Experience0ExperienceContent">Experience Content</label> <input name="data[Experience][0][experience_content]" class="span3" id="Experience0ExperienceContent" type="text"> <input type="hidden" id="currentval" name="currentval" value="0" /> </div> <script type="text/javascript"> $(document).ready(function(){ $("a").click(function(){ var currentval = parseInt($("#currentval").val()) + 1; var cloneme = $("#Experience0ExperienceContent").clone(); var newid = "Experience" + currentval + "ExperienceContent"; cloneme.attr("id",newid); $("#currentval").val(currentval); $("div").append(cloneme); }); }) </script> </body> </html>

Edit:

Here is the link to the code in jsfiddle: http://jsfiddle.net/kYwXX/1/

0

Dg3 Feb 25 '12 at 4:39

source share

nnnnnn · Accepted Answer · 2012-02-25T05:04:18+0000

You can try something like this:

 $("a").click(function() { $("div.input.text") .last() .clone() .appendTo($("body")) .find("input").attr("name",function(i,oldVal) { return oldVal.replace(/\[(\d+)\]/,function(_,m){ return "[" + (+m + 1) + "]"; }); }); return false; });

As shown here: http://jsfiddle.net/6Xg4S/

Essentially, when you click on your anchor, it clones the last div and adds it to the body (at least my example joins the body - obviously, you could add it to something more specific or .insertAfter() last), then take the number from the middle of the name and increase it by replacing the regular expression.

Having done this, I would like to note that you do not need to specify your unique names: all server technologies that I would like to use can process several request parameters with the same name (for example, Java has getParameterValues() that returns an array).

EDIT: Here's the version that clones only the input element, in particular the last entry in the div, updates its identifier and adds it to the end of the div. According to your comment, this no longer changes the name (although, obviously, you can simply add an extra .attr() call as above if you want to change the name too). Oh, and also this sets the value to empty (I forgot to do it higher).

 $("#extra a").click(function() { var $div = $(this).next(); $div.find("input") .last() .clone() .appendTo($div.append("<br/>")) .val("") .attr("id",function(i,oldVal) { return oldVal.replace(/\d+/,function(m){ return (+m + 1); }); }); return false; });

Demo: http://jsfiddle.net/6Xg4S/4/

How to clone or duplicate fields using jquery?

More articles: