Problems with population

[hcdarkmage]

Ok, here we go. I have a form that lets users input options into the database for things like radio buttons, checkboxes and dropdowns. Now, my problem is I can't get the JS to populate the proper area when they click the "add" button.

 

Here is the code:

<tr id=tbrowOption style="display:none">
    <td valign=top><?php echo $lang['contactform']['fieldoptions'] ?></td>
    <td>
<table border=0 cellpadding=0 cellspacing=0 width=98%>
    <tr>
                <td><input name=optionvalue style="width:160px"> <input type=button value="<?php echo $lang['contactform']['add'] ?>" onclick="addOption(document.thisform.optionvalue.value); document.thisform.optionvalue.focus();"> <input type=button value="<?php echo $lang['contactform']['del'] ?>" onclick="deleteOption()"></td>
    </tr>
    <tr>
	<td><select size=5 name=options style="width:230px" onchange="populateItem(this.options[this.selectedIndex].index)"></select></td>
    </tr>
</table>
    </td>
</tr>

 

And the JS:

function addOption(optionvalue){
var sAgent = navigator.userAgent.toLowerCase() ;
//for ie browser
if (sAgent.indexOf('msie')!=-1 && sAgent.indexOf('opera')==-1) {
	if ((optionvalue.length==0) ||(optionvalue==null)) {
		alert("<? echo $lang['contactform']['mustenteroption'] ?>");
	}else {
		if (optionvalue != ""){
			var opt = new Option(optionvalue,optionvalue);
			document.thisform.option.options.add(opt);
			var oNewItem = document.createElement("INPUT");
	   		document.thisform.children(0).insertAdjacentElement("afterBegin",oNewItem);
	   		oNewItem.type = "TEXT";
	   		oNewItem.name = "options[]";
	   		oNewItem.value= optionvalue;
	   		oNewItem.style.display= "none";
	   		document.thisform.optionvalue.value="";
		}
	}
//for gecko and other browser, else if (navigator.product == "Gecko" && navigator.productSub >= 20030210){
} else {
	if ((optionvalue.length==0) ||(optionvalue==null)) {
			alert("<? echo $lang['contactform']['mustenteroption'] ?>");
	}else {
		if (optionvalue != ""){
			var opt = new Option(optionvalue,optionvalue);
			document.thisform.option.options.add(opt);
			var input2 = document.createElement('INPUT');
	        input2.id = optionvalue;
	        input2.type = "text";
	        input2.name = "options[]";
	        input2.value = optionvalue;
			thisform.appendChild(input2);
	    	input2.style.display="none";
			document.thisform.optionvalue.value = "";

			i = document.thisform.option.length-1;
			multiOption[i] = optionvalue;
		}
	}
}

}

function deleteOption(){
var sAgent = navigator.userAgent.toLowerCase() ;
//for ie browser
if (sAgent.indexOf('msie')!=-1 && sAgent.indexOf('opera')==-1) {
	var optionlist = document.thisform.option;
	for(var i=0; i<optionlist.options.length; i++) {
		if(optionlist.options[i].selected && optionlist.options[i] != "") {
			document.thisform.elements(optionlist.options.length-i-1).removeNode();
			optionlist.options[i]= null;
			break;
		}
	multiOption.splice(selecteditem, 1);
   	}

//for gecko and other browser, else if (navigator.product == "Gecko" && navigator.productSub >= 20030210){
} else {
	var optionlist = document.thisform.option;
	for(var i=0; i<optionlist.options.length; i++) {
		if(optionlist.options[i].selected && optionlist.options[i] != "") {
			optionlist.options[i]= null;
			break;
		}
   		}
   	thisvalue = multiOption[selecteditem];
	d_nested = document.getElementById(thisvalue);
	throwaway_node = thisform.removeChild(d_nested);
	multiOption.splice(selecteditem, 1);
}
}

function populateItem(index) {
selecteditem=index;
}

 

Any help with this would be appreciated.

[hcdarkmage]

Any ideas? Do I need to clarify anything?

[hcdarkmage]

Well, It looked harder then it was. After much Google trial and error I found a solution:

 

	<tr id="tbrowOption" style="display:none">
		<td valign="top"><?php echo $lang['contactform']['fieldoptions'] ?></td>
		<td>
			<table border=0 cellpadding=0 cellspacing=0 width=98%>
				<tr>
					<td><input name="optionvalue" id="optionvalue" style="width:160px"> <input type="button" value="<?php echo $lang['contactform']['add'] ?>" onclick="addOption()"> <input type=button value="<?php echo $lang['contactform']['del'] ?>" onclick="deleteOption()"></td>
				</tr>
				<tr>
					<td><select size=5 name="optionslist" id="optionslist" style="width:230px">
						<?php
							if (($pageaction=="edit" || $pageaction=="update") && $field_id !=""){
								foreach($options as $value){
									echo "<option value=".$value.">".$value."</option>";
								}
							}
						?>
					</select></td>
				</tr>
			</table>
		</td>
	</tr>

 

And the JS code:

function trimString(input) {
var output = input;
while (output.substring(0, 1) == ' ') {
	output = output.substring(1, output.length);
}
while (output.substring(output.length - 1, output.length) == ' ') {
	output = output.substring(0, output.length - 1);
}
return output;
}

function addOption() {
var textbox = document.getElementById('optionvalue');
var listbox = document.getElementById('optionslist');
var inList = false;
var myText = trimString(textbox.value);
var myOption;

if(myText != '') {
	for(var i=0; i<listbox.options.length; i++) {
		if(myText.toLowerCase() == listbox.options[i].text.toLowerCase()) {
			inList = true;
			break;
		}
	}
	if(!inList) {
		myOption = new Option(myText, myText);
		listbox.options[listbox.options.length] = myOption;
	}
}
}

function deleteOption() {
var listbox = document.getElementById('optionslist');

for(var i=0; i<listbox.options.length; i++) {
	if(listbox.options[i].selected) {
		listbox.options[i] = null;
	}
}
}