你好,我正在尝试生成带有文本框和删除按钮的动态div。在表单提交时,我想要所有动态生成的文本框值,如何为文本框元素分配唯一id。文本框的ID/名称应该是唯一的。。以正确获取所有值。请建议。。
我的代码:
<HTML>
<HEAD>
<TITLE> Add/Remove dynamic elements</TITLE>
<SCRIPT language="javascript">
function addRow(divId) {
count = 0;
count++;
var parentDiv = document.getElementById(divId);
// create a div dynamically
var eleDiv = document.createElement("div");
eleDiv.setAttribute("name", "olddiv");
eleDiv.setAttribute("id", "olddiv");
// create a textbox dynamically
var eleText = document.createElement("input");
eleText.setAttribute("type", "text");
eleText.setAttribute("name", 'textbox' + count);
eleText.setAttribute("id", "textbox");
// create a delete button dynamically
var eleBtn = document.createElement("input");
eleBtn.setAttribute("type", "button");
eleBtn.setAttribute("value", "delete");
eleBtn.setAttribute("name", "button");
eleBtn.setAttribute("id", "button");
eleBtn.setAttribute("onclick", "deleteRow('button')");
// append new div to parent div
parentDiv.appendChild(eleDiv);
// append textbox & button to new div
eleDiv.appendChild(eleText);
eleDiv.appendChild(eleBtn);
}
function deleteRow(tableID) {
var div = document.getElementById('olddiv');
if (div) {
div.parentNode.removeChild(div);
}
}
</SCRIPT>
<form name="objForm" action="test1.php">
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
<div id="dataTable" width="350px"><INPUT type="text" name="txtData" /></div>
<input type="submit" value="Submit"/>
</form>
您可以保留一个全局计数变量(在函数divId之外)。每次创建一个新的div时,都会在计数器中添加1,并将其用作文本框的唯一ID。
<script language="javascript">
var globalcount=0;
function addRow()
{
globalcount++;
//the rest
}
</script>
剩下的就像你已经为这个名字做的一样。
要直接回答您的问题,您可以尝试:
var textboxCount = 0;
/* In your function */
// create a textbox dynamically
var eleText = document.createElement("input");
eleText.setAttribute("type", "text");
eleText.setAttribute("name", 'textbox' + count);
eleText.setAttribute("id", "textbox" + textboxCount);
textboxCount += 1; //Increment the count
这将创建id为textbox0
、textbox1
、textbox2
等的文本框。
或者,为了更有效的选择,你可以将你创建的所有文本框存储在一个数组中,比如:
var textboxes = new Array();
/* In your function */
// create a textbox dynamically
var eleText = document.createElement("input");
eleText.setAttribute("type", "text");
eleText.setAttribute("name", 'textbox' + count);
textboxes.push(eleText);
现在,您可以不调用e = document.getElementById('textbox4');
,而调用e = textboxes[4];
此函数将生成一个唯一的ID:
function uniqueId() {
var uid;
do {
uid = 'uid-' + Math.random();
} while (document.getElementById(uid));
return uid;
}