Duplicating elements with Javascript and naming w/ counter

Question

I think I've searched long enough to warrant asking this, and I hope I'm not missing something obvious, but I'm at my wits' end with this. I'm a complete JavaScript noob, and I'm having difficulty getting a script I found online to work correctly.

The project I was assigned was to make it so this form could be extended by clicking a button, and I thought I'd be able to accomplish it with HTML alone, but that doesn't seem possible. I found this script, and was able to get the duplication part of it to work:

http://www.quirksmode.org/dom/domform.html

However, the part of the script that's supposed to append a counter to the names of the fields isn't working, and therefore when the form is submitted, everything is recorded under the first form's name value. My guess is that that part of the script is trying to get the name of the wrong node, but I really don't know. Here's a shortened version of what I have. Ugly, but hopefully it gets the point across...

http://pastebin.com/nQhnXXKx

Let me know if I can clarify, and any help would be greatly, greatly appreciated!

You didn't close a `` at one point. Actually, it's worse than that...you have a lot of invalid HTML — Ian, Jul 16 '13 at 19:07
Also, don't you think you meant to use `window.onload = init;`? — Ian, Jul 16 '13 at 19:13
Ah, sorry, that's more than likely a result of my chopping it up to make it simpler to sort through. My frustration is making me sloppy. I'll update it in a bit... — nda214, Jul 16 '13 at 19:14
If it helps, this is how I'd change it for now: http://jsfiddle.net/gAaxS/ — Ian, Jul 16 '13 at 19:33
That is hugely helpful. I'll mess around with it and let you know the results... — nda214, Jul 16 '13 at 19:36
Success! I was able to incorporate it into my page. You're a lifesaver @Ian! — nda214, Jul 18 '13 at 20:27
Awesome, glad it helped and you got it working. I added an answer. Let me know if you need more help with it :) — Ian, Jul 18 '13 at 20:40

score 0 · Accepted Answer · answered Jul 18 '13 at 20:40

Reorganizing the code, you could use something like this:

(function () {
    "use strict";

    var counter, init, addWorkshop, renameInputs, removeWorkshop;

    counter = 0;

    init = function () {
        document.getElementById("moreWorkshops").onclick = addWorkshop;
        addWorkshop();
    };

    addWorkshop = function () {
        var clonedWorkshop, targetInsert;

        counter++;

        clonedWorkshop = document.getElementById("readroot").cloneNode(true);
        clonedWorkshop.id = "";
        clonedWorkshop.className = "";
        clonedWorkshop.querySelector(".remover").onclick = removeWorkshop;
        renameInputs(clonedWorkshop);

        targetInsert = document.getElementById("writeroot");
        targetInsert.parentNode.insertBefore(clonedWorkshop, targetInsert);
    };

    renameInputs = function (container) {
        var children, i, j, cur, theName;
        children = container.children;
        for (i = 0, j = children.length; i < j; i++) {
            cur = children[i];
            if (cur.nodeName.toLowerCase() === "input") {
                theName = cur.name;
                if (theName) {
                    cur.name = theName + counter;
                }
            } else {
                renameInputs(cur);
            }
        }
    };

    removeWorkshop = function () {
        this.parentNode.parentNode.removeChild(this.parentNode);
    };

    window.onload = init;
}());

DEMO: http://jsfiddle.net/gAaxS/

Note that this is very structure-specific - for example, the this.parentNode.parentNode means that it has exactly two ancestors that you want to target. If you changed the HTML, you'd have to change the JS (which is usual).

Duplicating elements with Javascript and naming w/ counter

1 Answers1