我如何保留动态添加的文本框的值 [英] how do i retain the value of dynamically added textboxes
本文介绍了我如何保留动态添加的文本框的值的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用此代码:
<html>
<head>
<title>Dynamic Form</title>
<script type="text/javascript">
var i = 6;
function CreateTextbox(){
createTextbox.innerHTML = createTextbox.innerHTML
+'<input type=text name="flow'+i+'"/>'
i++;
}
</script>
</head>
<body>
<form name="form" action="post">
<input type="button" name="what" value="clickHere" onClick="CreateTextbox()"/>
<div id="createTextbox"></div>
</form>
</body>
当我添加一个新的文本框时,在前一个文本框中输入的值会被删除.我怎样才能保留它?
when i add a new textbox, the value that was entered in the previous textbox is deleted. how can i retain it?
推荐答案
通过连接 innerHTML 添加 HTML 元素非常缓慢,这会导致值被清除,因为容器(div createTextbox
) 并且所有子项都在每个 innerHTML 分配中重新创建.
Adding HTML element by concatenating the innerHTML is very slow and that is causing the values to be cleared, since the container (the div createTextbox
) and all the childs are re-created on each innerHTML assignment.
我建议您使用 document.createElement
并使用 appendChild<将元素 using 附加到容器 div/code>
:
window.onload = function () {
var createTextbox = function () {
var i = 6,
container = document.getElementById('createTextbox');
return function () {
var div = document.createElement('div'),
input = document.createElement('input');
input.type= "text";
input.name = "flow" + i;
div.appendChild(input);
container.appendChild(div);
i++;
}
}();
// event binding
document.getElementById('addButton').onclick = createTextbox;
}
在此处检查上述代码是否有效.
Check the above code working here.
这篇关于我如何保留动态添加的文本框的值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文