Properly renaming cloned inputs JQuery

Question

I'm attempting to craft my own cloning function that changes the name of cloned inputs so they can be collected by PHP.

on W3C I found this simple function to build from

$("button").click(function(){
$("p").clone().appendTo("body");
});

I modified it to clone a fieldset with multiple inputs and it worked. I took it a step farther to try to make it rename and integer the name attribute of the different input elements and now it doesn't even clone the field.

Here's what I have so far.

$("#p20_01_yes").click(function(){
var num     = $('.clonedInput').length,
newNum  = new Number(num + 1);
$("#cloner").clone($("input, textarea, select").each().attr('name'+newNum)).appendTo("#page20");
});

I just tried to post a snippet of the HTML but I got a warning telling me the limit is 30,000 characters so here's a js fiddle that shows everything.

https://jsfiddle.net/Optiq/krjztsm2/

I structured the JQuery the way I did because I figured it would be more appropriate to do the renaming inside of the clone function then append the results to the page rather than appending it then going back and separating it from everything else to dig back through... figured that would make more sense to the computer. Is this the right way to look at it?

If you want to keep it simple ... http://stackoverflow.com/questions/4543500/form-input-field-names-containing-square-brackets-like-fieldindex — Roamer-1888, Nov 07 '15 at 22:14
Even better - http://stackoverflow.com/questions/1137557/using-square-brackets-in-hidden-html-input-fields. With PHP server-side, you just need `name=myName[]` without a counter. PHP will build an array of values for you. — Roamer-1888, Nov 07 '15 at 22:28
interesting, but how would that be called to the JQuery to make the duplicates? — Optiq, Nov 07 '15 at 22:53
so when someone clicks the submit button, the PHP file will automatically integer between the brackets? What about instances with radio buttons? In HTML we have to use the same name on all the options we want them to choose from. So say I have 10 options that are duplicated, how will the HTML know to separate those 2 groups of 10 rather than mashing them into a group of 20? The on the reverse end, how would I keep the PHP from splitting the 10 options apart into separate elements? — Optiq, Nov 07 '15 at 23:05
Yeah, good point about sets of radio buttons. I think there's some standard trick but I can't remember it right now. It's been ages .... @NiettheDarkAbsol's ` — Roamer-1888, Nov 07 '15 at 23:34

nils · Accepted Answer · 2015-11-07T23:14:22.883

1

You were pretty close already. I'm not sure if my answer will work perfectly (seeing that the JSFiddle is pretty messy), but you could just adapt the classes and ids afterwards.

You just need to split your tasks into two parts:

Clone the fieldset
Update the input elements names (and possibly ids as well?)

Here is an example of how this could work:

$("#p20_01_yes").click(function(){
    var num = $('.clonedInput').length,
    newNum = new Number(num + 1);
    var $clonedFieldset = $("#cloner").clone().appendTo("#page20");
    $clonedFieldset.find("input, textarea, select ").each(function() {
        var $item = $(this);
        $item.attr('name', $item.attr('name') + newNum);
    });
});

edited Nov 07 '15 at 23:14

answered Nov 07 '15 at 22:21

nils

25,734
5
70
79

ok I just tried that. It clones again, but it doesn't update the name attribute. The console also shoots out a bunch of errors. There's 9 of these Uncaught ReferenceError: $ is not defined then it says Uncaught TypeError: $item.attr is not a function Uncaught ReferenceError: $clonedFieldset is not defined Uncaught ReferenceError: $clonedFieldset is not defined Uncaught TypeError: $item.attr is not a function – Optiq Nov 07 '15 at 22:49
I selected JQuery2.1.3 in the jsfiddle, and the updated version throws back those same errors too along with a couple more saying $clonedFieldset and $item aren't functions. – Optiq Nov 07 '15 at 22:58
I can't even find the id `p20_01_yes` in the code. Also, I don't see any Javascript errors. How do you trigger the click? – nils Nov 07 '15 at 23:09
it's all the way at the bottom and over to the right, it's the "add customer" button. sorry I know it's pretty messy, I'm in the middle of redesigning everything to re-size with the window and haven't done the individual elements for that page yet. – Optiq Nov 07 '15 at 23:12
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/94508/discussion-between-damighty-optiq-and-nils). – Optiq Nov 07 '15 at 23:13

Properly renaming cloned inputs JQuery

1 Answers1