Issue Cloning Form Fields Within Table with Javascript

Question

In the code below it works great to clone the table, but it doesn't go deep enough to rename the inputs of each form field in the table. For example Attendee1, Attendee2, Attendee3 etc.

Is there a way instead of just grabbing NewEl.children a way to just find all the input elements within the table then rename them?

I am not trying to add a row, I need to clone the entire table.

Any help you all out there in cyberland can give will be greatly appreciated.

<form name="EditRoster" method="post" action="DoRoster.php">
    <table id="RosterTbl" cellspacing="0" cellpadding="2">
        <tr style="text-align:left;vertical-align:top;">
            <td><b>Name</b>:</td>
            <td>
                <input type="text" name="Attendee" value="" size="25" onclick="alert(this.name)">
            </td>
            <td><b>Paid</b>:</td>
            <td>&nbsp;
                <input type="checkbox" name="Paid" value="Yes" size="25">&nbsp;
            </td>
        </tr>
        <tr style="text-align:left;vertical-align:top;">
            <td><b>Email</b>:</td>
            <td>
                <input type="text" name="Email" value="" size="25">
            </td>
            <td><b>Paid When</b>:</td>
            <td>&nbsp;
                <input type="text" name="PaidWhen" value="" size="10">&nbsp;
            </td>
        </tr>
    </table>
    <div style="padding:5px;">
        <input type="hidden" name="NumStudents" value="0">
        <input type="button" name="AddPersonButton" value="Add Person" onclick="CloneElement('RosterTbl','NumStudents');">
    </div>
</form>

<script language="javascript">

var TheForm = document.forms.EditRoster;

function CloneElement(ElToCloneId, CounterEl) {
    var CloneCount = TheForm[CounterEl].value;
    CloneCount++;
    TheForm[CounterEl].value = CloneCount;

    var ElToClone = document.getElementById(ElToCloneId);

    var NewEl = ElToClone.cloneNode(true);
    NewEl.id = ElToCloneId + CloneCount;
    NewEl.style.display = "block";

    var NewField = NewEl.children;
    for (var i = 0; i < NewField.length; i++) {
        var InputName = NewField[i].name;
        if (InputName) {
            NewField[i].name = InputName + CloneCount;
        }

        var insertHere = document.getElementById(ElToCloneId);
        insertHere.parentNode.insertBefore(NewEl, insertHere);
    }
}

</script>

Answer 1

Looked like you were on the right track, but I think you were taking a few extra steps, so I think I simplified it ;)

One thing you were missing was that the value of NumStudents is returned as a string so you have to call parseInt() on it.

var theForm = document.forms.EditRoster;

function insertAfter(referenceNode, newNode) {
    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

function CloneElement(cloneID, counterName) {
    var clone = document.getElementById(cloneID);
    var newClone = clone.cloneNode(true);
    var counter = theForm[counterName].value = parseInt(theForm[counterName].value) + 1;

    // Update the form ID
    newClone.id = newClone.id + counter;

    // Update the child Names
    var items = newClone.getElementsByTagName("*");
    for (var i = 0; i < items.length; i++) {
        if (items[i].name != null)
            items[i].name = items[i].name + counter;
    }

    insertAfter(clone, newClone);
}

Here's a working copy on jsFiddle.

P.s. I wasn't sure if you wanted the new fields clearing so I left them.