Question

当用户按下＆＃34;新框＆＃34;在创建的前一个框中输入信息后，我不希望在按下New Box按钮时擦除用户输入的旧数据。如何在创建新TextBox时保存旧用户输入的数据？

＆＃13;

<html>
<head>
    <script>
    var boxCount=1;
    var boxName=0;
    function newBox(){
    	var boxName="Box_"+boxCount;
    	document.getElementById('box').innerHTML+='<br><input type="text" name="'+boxName+'" placeholder="'+boxName+'"/><br>';
    	boxCount+=1;
    }
    </script>

</head>
    <body>
    <button type="button" onclick="newBox()">New Box</button>
    <form action="#" method="post">
    <span id="box"></span><br>
    <input type="submit" value="Submit">
    </form>
    </body>
    </html>

＆＃13;

Answer 1

element.innerHTML会摧毁所有元素的孩子。

如果要保留子元素，则需要使用DOM函数。 element.appendChild（）就是你要找的。

<html>
<head>
    <script>
        var boxCount=1;
        var boxName=0;

        function newBox()
        {
            var input           = document.createElement("input");
            input.type          = "text";
            input.name          = "Box_" + boxCount;
            input.placeholder   = "Box_" + boxCount;
            document.getElementById('box').appendChild(input);

            var new_line = document.createElement("br");
            document.getElementById('box').appendChild(new_line);

            boxCount++;
        }
        </script>

    </head>
    <body>
        <button type="button" onclick="newBox()">New Box</button>
        <form action="#" method="post">
            <span id="box"></span><br>
            <input type="submit" value="Submit">
        </form>
    </body>
</html>

此外，您可以将input.name = "Box_" + boxCount;替换为input.name = "Box[" + boxCount + "]"，从而将服务器端的所有文本框值作为数组获取。有时处理这个更容易。

在javascript中创建新文本框后保存用户输入

1 个答案: