JQUERY: how do I automatically change the name and id of cloned objects?

Question

I have an entire div I'd like to clone with jquery. I got the cloning part down, but when I selected the radio buttons I noticed it would only select one option out of all the clones which instantly told me they all still possessed the same names and IDs as the originals.

Now that this has my brain going, I'd like to change the names and ids of these elements by keeping the same name and just adding "02,03,04" to the end each time it's cloned otherwise once someone submits the form I'll have no clue as to which answers belong to which elements originally.

here's a fiddle of a simpler demo that represents the structure of what I'm trying to manipulate. https://jsfiddle.net/6djnv9u2/1/

and here's the coding I have so far.

$(document).ready(function(){
$("#dplct").click(function(){
    $("#container01").clone("*").appendTo("#page01").after("#container01");
    });
});

<form>
    <div id="page01">
        <div id="container01">
            <label for="fname">First Name</label>
            <input type="text" name="First name" id="fname">

            <label for="lname">Last Name</label>
            <input type="text" name="Last name" id="lname">

            <label for="stf">Stuff</label>
            <textarea name="stuff" id="stf"></textarea>

            <label for="dplct">Duplicate</label>
            <input type="button" name="Duplicate" id="dplct">

            <input  type="radio" name="1" value="1" id="q1a1">
            <input type="radio" name="1" value="2" id="q1a2">
            <input type="radio" name="1" value="3" id="q1a3">

            <label for="nxt">Next</label>
            <input type="button" name="Next" id="nxt">

       </div><!--container-->
    </div><!--page01-->
</form>

I looked through the rest of the site and came across other examples of changing names but none I could recognize as keeping the same name and adding to the end to make them unique, so if there's something here that shows it PLEASE let me know before tearing my head off about not trying hard enough, I honestly don't know where to go from here and can't think of anything deeper to add to this. Where do I go from here?

http://stackoverflow.com/questions/10126395/how-to-jquery-clone-and-change-id — Roko C. Buljan, Aug 27 '15 at 00:20
why `01`, `02`, `03` instead of simply `1`, `2`, `3`? is that `0` something special? — Roko C. Buljan, Aug 27 '15 at 00:26
Also why on earth would you want to duplicate? Isn't it simpler to have a [Create New] Button? That way you simply create an empty new clone. Otherwise by "duplicating" you'd have to than remove unwanted names, surnames - you could easily mistaken a person and it's correct / wrong answers for another's.... — Roko C. Buljan, Aug 27 '15 at 00:50
You also missed to explain in your Q what about this ID's: `q1a1` — Roko C. Buljan, Aug 27 '15 at 01:04
After a bit of thinking - Your program logic is totally off (if you're just building a questionnaire that will be used by a single person)... — Roko C. Buljan, Aug 27 '15 at 01:05

score 0 · Answer 1 · edited May 23 '17 at 12:06

Your question is closely related to: How to JQuery clone() and change id

Let's see your main errors:

You don't need any ID at all (Except for container1 if you really need it... (I see no reason)). (So you don't need to increment ID at all! Yey) You won't have any duplicate ID in your page for sure!
Do you know that label for is not needed if you wrap your action element inside the label? (Exactly! no ID needed again!)
Don't (avoid) use spaces inside name attributes All you need is a numerical suffix attribute like name1 etc - for every field!!! (which you miss to do)
01 for any reason? Use 1 and go with the flow
Duplicating fields? Why not having a button that appends (creates) new pre-emptied fields set? (otherwise if a user clones a person's field he should manually remove all the old person's data... not nice at all)

So take this HTML as a starting point and use the info from the link above:

<form>
    <div id="page1">
        <div id="container1">
            <label>
                First Name
                <input type="text" name="firstName1"/>
            </label>
            <label>
                Last Name
                <input type="text" name="lastName1"/>
            </label>
            <label>
                Stuff
                <textarea name="stuff1"></textarea>
            </label>
            <label>
                Next
                <input type="button" name="next1" />
            </label>
            <input type="radio" name="1" value="1" />
            <input type="radio" name="1" value="2" />
            <input type="radio" name="1" value="3" />
        </div>
        <!--container-->
    </div>
    <!--page01-->
</form>
<button id="createNew">Add new</button>

JQUERY: how do I automatically change the name and id of cloned objects?

1 Answers1