Hi all,
i've got a small problem in IE in which i have a script which clones a select list and then dynamically adds to the page and renames. In which it is imperative it renames as it will be pulled through a form into asp.
The problem lies in which if i clone once then the name is correct yet if i clone more than once then the previous clones names reset to the clones name and only the last cloned select has the proper name.
e.g.
sel_0
sel_0
sel_2
when it should be
sel_0
sel_1
sel_2
This works fine in FF but not in IE.
Any ideas why? or a work around?
Also the select list in the final code will be generated server side.
i've got a small problem in IE in which i have a script which clones a select list and then dynamically adds to the page and renames. In which it is imperative it renames as it will be pulled through a form into asp.
The problem lies in which if i clone once then the name is correct yet if i clone more than once then the previous clones names reset to the clones name and only the last cloned select has the proper name.
e.g.
sel_0
sel_0
sel_2
when it should be
sel_0
sel_1
sel_2
This works fine in FF but not in IE.
Any ideas why? or a work around?
Also the select list in the final code will be generated server side.
Code:
<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript">
function addSoftware() {
var noId = document.getElementById('hval').value;
// get the reference for the body
var div = document.getElementById('soft');
// creates a <table> element and a <tbody> element
var tbl = document.createElement("table");
var tblBody = document.createElement("tbody");
var newdiv = document.createElement('table');
newdiv.style.border = "3px #666666 dotted";
newdiv.width='550';
var newtr = document.createElement('tr');
var newtd = document.createElement('td');
newtd.style.padding = "5px 5px 5px 5px";
newtd.valign = 'top'
var row = document.createElement("tr");
var cell = document.createElement("td");
cell.align = 'left';
var cellText = document.createTextNode("Software");
cell.appendChild(cellText);
row.appendChild(cell);
var cell2 = document.createElement("td");
cell2.align = 'left';
var formFld = document.getElementById("sel_0").cloneNode(true);
formFld.setAttribute('id','sel_' + noId);
cell2.appendChild(formFld);
row.appendChild(cell2);
tblBody.appendChild(row);
// put the <tbody> in the <table>
tbl.appendChild(tblBody);
// appends <table> into <body>
newtd.appendChild(tbl);
newtr.appendChild(newtd);
newdiv.appendChild(newtr);
div.appendChild(newdiv);
div.innerHTML += "<br>";
// sets the border attribute of tbl to 2;
tbl.setAttribute("border", "0");
var s1 = document.getElementById('sel_' + noId);
var n1 = 'sel_' + noId;
s1.setAttribute('name', n1);
noId++;
document.getElementById('hval').value=noId;
}
</script>
</head>
<body>
<form action="test.asp" method="post" >
<select name="sel_0" id="sel_0" >
<option value="1">Test A</option>
<option value="2">Test B</option>
<option value="3">Test C</option>
<option value="4">Test D</option>
</select>
<p>
<div id="soft" style="text-align:center"></div>
</p>
<input type="hidden" id="hval" name="hval" value="1">
<p><input type="submit" name="submit" value="Save Changes" />
</p><input type="button" value=" + " name="AddSoft" onclick="addSoftware()">
</form>
</body>
</html>