动态添加/删除表单字段

Question

I'm trying to add, and hopefully remove once adding works, some dimension fields to a form when the user clicks a button to then input into a mysql database, But I am stuck getting anything to display.

Javascript:

    var counter = 0;

function moreFields() {
    counter++;
    var newFields = document.getElementById('readroot').cloneNode(true);
    newFields.id = '';
    newFields.style.display = 'block';
    var newField = newFields.childNodes;
    for (var i=0;i<newField.length;i++) {
        var theName = newField[i].name;
        if (theName)
            newField[i].name = theName + counter;
    }
    var insertHere = document.getElementById('writeroot');
    insertHere.parentNode.insertBefore(newFields,insertHere);
}

window.onload = moreFields;

HTML:

        <div id="readroot" style="display: none">
        <p>Quantity<input type="text" name="iQuantity" size="3">
Weight(kg)<input type="text" name="iWeight"size="4">    Length(cm)<input type="text" name="iLength"size="4"> *  Width(cm)<input type="text" name="iWidth"size="4"> * Height(cm)<input type="text" name="iHeight"size="4"></div>
    <span id="writeroot"></span>

    <input type="button" value="Add another text input" onClick="moreFields();">

Any help is greatly appreciated, thanks

Answer 1

Your JavaScript for creating the elements works. The way your are attaching events could be improved. Here is how I would update your JavaScript code:

var counter = 0;

function moreFields() {
    counter++;
    var newFields = document.getElementById('readroot').cloneNode(true);
    newFields.id = '';
    newFields.style.display = 'block';

    var newField = newFields.childNodes;
    for (var i = 0; i < newField.length; i++) {
        var theName = newField[i].name;
        if (theName) newField[i].name = theName + counter;
    }

    var insertHere = document.getElementById('writeroot');
    insertHere.parentNode.insertBefore(newFields, insertHere);
}

if (window.addEventListener) {
    window.addEventListener('load', moreFields, false);
} else if (window.attachEvent) {
    window.attachEvent('onload', moreFields);
}

var el = document.getElementById('clicker')

if (el.addEventListener) {
    el.addEventListener("click", moreFields, false);
} else {
    el.attachEvent('onclick', moreFields);
}

And your HTML can be improved a lot. Here I have closed your tags and it is now working.

<div id="readroot" style="display:none;">
    <p>Quantity
        <input type="text" name="iQuantity" size="3" />Weight(kg)
        <input type="text" name="iWeight" size="4" />Length(cm)
        <input type="text" name="iLength" size="4" />* Width(cm)
        <input type="text" name="iWidth" size="4" />* Height(cm)
        <input type="text" name="iHeight" size="4" />
    </p>
</div>
<div id="writeroot"></div>
<input id="clicker" type="button" value="Add another text input" />