I wrote a page with functions for 2 listboxes which let me move data between the listboxes. However this stops working when I wrap the listboxes inside a form. Any ideas on why this is happening? the delAttribute and addAttribute buttons also for some reason throw out the alert box in createListObjects() which is only called in the onload even of the body tag.

function createListObjects(){
list1 = document.getElementById("list1");
list2 = document.getElementById("list2");
alert(list1.options.item(0).value);
list1Clone=list1.cloneNode(true);
cloneOptions=list1Clone.getElementsByTagName("option");
//but = document.getElementById("test");
//but.onclick = test;

}
function delAttribute(){
var selIndex = list2.selectedIndex;
if(selIndex < 0)
return;
list2.removeChild(list2.options.item(selIndex));
}
function addAttribute(){
var addIndex = list1.selectedIndex;
if(addIndex < 0)
return;
list2.appendChild(cloneOptions[addIndex].cloneNode(true));
}