每次需要新表单时,您都应该重新创建表单。
另外,不要通过 ID 获取元素。这是一个缓慢的 DOM 操作,可能会失败。静态 HTML 推荐使用 ID,因此 CSS 和 Javascript 可以指向它。
如果需要,只需在 Javascript 代码中保留对它的引用,而不是 getElementsByID。(我假设您需要它来提取提交时的表单数据)。
一个简单的例子(我很抱歉在这里使用 jquery,但无论如何它是一种通用语):
var inputs = { givenname: $('<input type="text">')
, surname: $('<input type="text">')
, age: $('<input type="select">')
, gender: $('<select>')
.append($('<option>').text('Female').val(0))
.append($('<option>').text('Male').val(1))
.append($('<option>').text('Other').val(2))
}
var form = $('<div class="myform">');
Object.keys(inputs).forEach(function(k) {
form.append(inputs[k]);
});
function getdata() {
var o = {}
Object.keys(inputs).forEach(function(k) {
o.k = inputs[k].val();
});
return o;
}
popupFunction(form, getdata);
然后(待创建)函数popupFunction
可以将表单移动到某处(mycontainer.append(form)
),当需要提交数据时,使用 getdata 函数提取数据。
请注意,我所说的引用保存在inputs
对象中。它们不是直接的 DOM 节点引用,而是对 jquery 对象的引用,这些对象又包含 DOM 节点,可以使用 jqueryval()
函数提取其值。