单击后，输入文本将恢复为默认值

Question

除了一件事之外，下面的表格正如我所愿。当我点击“添加”链接时，所有文本框的文本都会恢复为默认值，如图中所示。我该如何解决？感谢。

点击之前

：

单击“添加”后

：

代码：     

function addSection() {
    var str = '<div>' + 
                '<input type="text" name="composer" value="Compositor" />' + 
                '<input type="text" name="peca" value="Peca" size="40" />' + 
                '<input type="button" value="x" style="width: 26px" onclick="delSection(this)" /><br />' + 
            '</div>';

    document.getElementById("programa").innerHTML += str;
}

function delSection(field) {
    field.parentNode.outerHTML = "";
}

window.onload = addSection;

</script>
<fieldset>
    <legend>Programa</legend>
    <div id="programa">
    </div>
    <a href="#" onclick="addSection()" >Add</a><br />
</fieldset>
<input type="submit" value="Inscrever Aluno" name="submit" />

Answer 1

您可以使用appendChild()

解决此问题

JS

function newSet() {
    var div = document.createElement("div");   

    var composer = document.createElement("input");
    composer.type="text";
    composer.value = "Compositer";

    var peca = document.createElement("input");
    peca.type = "text";
    peca.value = "Peca";

    var button = document.createElement("input");
    button.type = "submit"

    div.appendChild(composer);
    div.appendChild(peca);
    div.appendChild(button);

    return div
}

function addSection() {    
    document.getElementById("programa").appendChild(newSet());
}

Demo

Answer 2

这是插入新元素的正确JS：

function addSection() {
    var newDiv = document.createElement('div');
    var str =   '<input type="text" name="composer" value="Compositor" />' + 
                '<input type="text" name="peca" value="Peca" size="40" />' + 
                '<input type="button" value="x" style="width: 26px" onclick="delSection(this)" /><br />';
    newDiv.innerHTML = str;
    document.getElementById("programa").appendChild(newDiv);
}

您需要找到元素命名（或识别）的解决方案，以便您可以使用delSelection(field)

删除它们

Answer 3

创建名称name="composer[]"和name="peca[]"

如果您不理解如何实现上述代码，请转到

http://www.randomsnippets.com/2008/02/21/how-to-dynamically-add-form-elements-via-javascript/