View Single Post - Clone Select

Awok · #1 (**permalink**) Jan 9th, 2008, 08:38

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.

Code: Select all

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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>