Form Cloning using Jquery with increment form fields name

Question

My form has two fields are short description and long description initially the form fileds names are section[new][1][description] and section[new][1][ldescription]

I would like to generate clone form fields which generate names like section[new][2][description] and section[new][2][ldescription]. each time i clone new form it should generate form fields names with increment id in between like section[new][incrementid goes here][description]

How to achieve this using regex or any other jquery techniques?

Here is code i'm using for form clonning

jQuery("button.add").on("click", clone); 

function clone(){
var clone = jQuery(this).parents(".pbone_section_default").clone()
    .appendTo("#section_list")
    .attr("id", "pbone_section_default_" +  cloneIndex)
    .find("*")
    .each(function() {
        // here we can put any logic to achieve desire element name  
        this.name = logic goes here;
    })
    .on('click','button.delete',remove);
};

What's in your variable cloneIndex ?

empiric
– empiric

2016-05-11 13:04:19 +00:00
Commented May 11, 2016 at 13:04 — empiric
– empiric, Commented May 11, 2016 at 13:04

pumpkinzzz · Accepted Answer · 2016-05-11 13:30:03Z

3

Yes it can be done (you were close).. Assuming you are using a 0 based indexing (i.e. starting from section[new][0][description]), try this code:

function clone(){
    var $clone = $(".pbone_section_default").last(),
        index = $clone.index();

    $clone.clone()
          .appendTo("#section_list")
          .find("[name*='["+index+"]']")
          .each(function(){
            $(this).attr("name", $(this).attr("name").replace("["+ index +"]", "["+ parseInt(index+1) +"]"));
          });
};

see a working example here: FIDDLE

Anyway, i suggest you to use templating engine instead, like Mustache or Underscore.. but there are plenty of them.. check this article and see which suits better to your projet

edited May 11, 2016 at 13:30

answered May 11, 2016 at 13:05

pumpkinzzz

2,9852 gold badges20 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

empiric Over a year ago

If you can be sure that the number in the name is always equal the elements index in the dom, than this will be OK, otherwise this could lead to an unexpected behaviour.

pumpkinzzz Over a year ago

@empiric sure, that's not bulletproof! There are better ways to do that, like templating as i suggested.. anyway i wanted to pursue what user was trying to do

chirag dodia Over a year ago

@pumpkinzzz can you please tell me what are the benefits of using templating engine?

empiric · Accepted Answer · 2016-05-11 13:22:08Z

2

You can use .match() and .replace() to find the number in the string an increment it:

.each(function() {
    this.name = incrementNumberinString(this.name);
});

var incrementNumberinString = function (string){
  var i = parseInt(string.match(/\d{1}/g))+1;
  return string.replace(/\d{1}/g, i)
}

The regex will find any digit which is existing exactly 1 times.

See here for an example of the Regex.

Note: This will only work under the assumption that there is only 1 number inside your inputs name.

Working Example

answered May 11, 2016 at 13:22

empiric

7,8767 gold badges40 silver badges51 bronze badges

1 Comment

Terry Carter Over a year ago

This is a brilliant solution. Solved a problem I have been having for a while.

Collectives™ on Stack Overflow

Form Cloning using Jquery with increment form fields name

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related