Clone Select - Rename not working in IE

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>

Rakuli · #2 (**permalink**) Jan 9th, 2008, 17:22

Okay, you can fix this by using the following code to set the name

Code: Select all

 var s1 = document.getElementById('sel_' + noId);
        var n1 = 'sel_' + noId;
 		var newName = document.createAttribute('name');
		newName.value = n1;
        s1.setAttributeNode(newName);

IE treats the name attribute as DOM Attribute object and so you have to create an attrivute object and attach that as the name..

This will mean the name will update correctly.

Cheers

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
chained select box dependable select	thenamenoonehastaken	JavaScript Forum	0	Feb 8th, 2008 05:49
Forum Rename	JacobHaug	Flash & Multimedia Forum	3	May 27th, 2007 19:51
Help Please Select Max Not Working	rosh1e	PHP Forum	3	May 13th, 2007 19:11
styling a select box, using php, ..not working...need help	sambkk	Web Page Design	0	Feb 5th, 2007 19:22
rename column name	simonneaves	Databases	2	Nov 11th, 2005 00:08

		Webforumz.com > Main Forums > Program Your Website > JavaScript Forum
Clone Select - Rename not working in IE