asked on
Problem with dynamic combobox
Hi have a javascript problem while adding a dynamic combo box. If i click the addRow button, a new row will be added to the last. The new will contain a text boxes, button and a combox box. The problem is with the combo box. Its not workly properly. Please reply and rectify it soon :)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> Add Site Details </title>
<script language="JavaScript">
var fActiveMenu = false;
var oOverMenu = false;
function mouseSelect(e)
{
if (fActiveMenu)
{
if (oOverMenu == false)
{
oOverMenu = false;
document.getElementById(fActiveMenu).style.display = "none";
fActiveMenu = false;
return false;
}
return false;
}
return true;
}
function menuActivate(idEdit, idMenu, idSel)
{
if (fActiveMenu) return mouseSelect(0);
oMenu = document.getElementById(idMenu);
oEdit = document.getElementById(idEdit);
nTop = oEdit.offsetTop + oEdit.offsetHeight;
nLeft = oEdit.offsetLeft;
while (oEdit.offsetParent != document.body)
{
oEdit = oEdit.offsetParent;
nTop += oEdit.offsetTop;
nLeft += oEdit.offsetLeft;
}
oMenu.style.left = nLeft;
oMenu.style.top = nTop;
oMenu.style.display = "";
fActiveMenu = idMenu;
document.getElementById(idSel).focus();
return false;
}
function textSet(idEdit, text)
{
document.getElementById(idEdit).value = text;
oOverMenu = false;
mouseSelect(0);
document.getElementById(idEdit).focus();
}
function comboKey(idEdit, idSel)
{
if (window.event.keyCode == 13 || window.event.keyCode == 32)
textSet(idEdit,idSel.value);
else if (window.event.keyCode == 27)
{
mouseSelect(0);
document.getElementById(idEdit).focus();
}
}
document.onmousedown = mouseSelect;
function addLocationProduct(i)
{
alert("ADD Location/Product "+i);
var myTable = document.getElementById("myTable");
var newTR = document.createElement("tr");
var newName1 = document.createElement("td");
var newName2 = document.createElement("td");
var newName3 = document.createElement("td");
var newName4 = document.createElement("td");
var newName5 = document.createElement("td");
var newName6 = document.createElement("td");
var newName7 = document.createElement("td");
var newName8 = document.createElement("td");
newName1.innerHTML="<input type='text' name='dynamicLocation'/><input type='button' hidefocus='1' value='▼' onclick=menuActivate('dynamicLocation', 'dynamicLocationDiv', 'dynamiclocationSelect')/><div id='dynamicLocationDiv' style='position:absolute; display:none; top:0px; left:0px;z-index:10000' onmouseover='Javascript:oOverMenu='dynamicLocationDiv';' onmouseout='Javascript:oOverMenu=false;'><select size='4' id='dynamiclocationSelect' style='width: 150; border-style: none' onclick='JavaScript:textSet('dynamicLocation',this.value);' onkeypress='JavaScript:comboKey('dynamicLocation', this);><option value='Mark's Office'>Mark's Office</option><option value='Kent's Office'>Kent's Office</option><option value='First Floor'>First Floor</option><option value='Second Floor'>Second Floor</option></select></div>";
newName2.innerHTML="<input type='text' name='dynamicProduct'>";
newName3.innerHTML="<input type='button' name='dynamicProductLookup' value=' ^ '>";
newName4.innerHTML="<input type='button' name='generateTrackId' value=' trackId '>";
newName5.innerHTML="<select name='dynamicFee'><option selected='selected'>Setup Fee</option><option>Training Fee</option><option>Misc Fee</option></select>";
newName6.innerHTML="<input type='text' name='siteCancelledDate'>";
newName7.innerHTML="<input type='button' name='calendar' value=' !! '>";
newName8.innerHTML="<input type='button' value=' deleteRow ' onclick='deleteRow(this.parentNode.parentNode.rowIndex)'/>";
newTR.appendChild(newName1);
newTR.appendChild(newName2);
newTR.appendChild(newName3);
newTR.appendChild(newName4);
newTR.appendChild(newName5);
newTR.appendChild(newName6);
newTR.appendChild(newName7);
newTR.appendChild(newName8);
myTable.appendChild(newTR);
}
function deleteRow(i){
alert(i);
document.getElementById('myTable').deleteRow(i);
}
</script>
</head>
<body>
<form>
<table>
<tr>
<td>SITE DETAILS</td>
<tr>
</table>
<table>
<tr>
<td>Site Name </td>
<td><input type="text" id="siteName"><input type="button" hidefocus="1" value="▼" onclick="JavaScript:menuActivate('siteName', 'siteNameDiv', 'siteNameSelect')">
<div id="siteNameDiv" style="position:absolute; display:none; top:0px; left:0px;z-index:10000" onmouseover="javascript:oOverMenu='siteNameDiv';"
onmouseout="javascript:oOverMenu=false;">
<select size="4" id="siteNameSelect" style="width: 150; border-style: none" onclick="JavaScript:textSet('siteName',this.value);" onkeypress="JavaScript:comboKey('siteName', this);">
<option value="Donnelson">Donnelson</option>
<option value="New Jersey">New Jersey</option>
<option value="New York">New York</option>
<option value="Boston">Boston</option>
</select>
</div>
</td>
<td>
<a href="#">Site Details</a>
</td>
</tr>
</table>
<table width="100%">
<tr>
<td width="80%">LOCATION / PRODUCT DETAILS</td>
<td width="10%"><input type="button" value="addRow" onclick="addLocationProduct(this.parentNode.parentNode.rowIndex)"></td>
<tr>
</table>
<table>
<tbody id='myTable'>
<tr>
<td><input type="text" id="location"><input type="button" hidefocus="1" value="▼" onclick="JavaScript:menuActivate('location', 'locationDiv', 'locationSelect')">
<div id="locationDiv" style="position:absolute; display:none; top:0px; left:0px;z-index:10000" onmouseover="javascript:oOverMenu='locationDiv';"
onmouseout="javascript:oOverMenu=false;">
<select size="4" id="locationSelect" style="width: 150; border-style: none" onclick="JavaScript:textSet('location',this.value);" onkeypress="JavaScript:comboKey('location', this);">
<option value="Mark's Office">Mark's Office</option>
<option value="Kent's Office">Kent's Office</option>
<option value="First Floor">First Floor</option>
<option value="Second Floor">Second Floor</option>
</select>
</div>
</td>
<td><input type="text" name="product"></td>
<td><input type="button" name="productLookup" value=" ^ "></td>
<td><input type="button" name="trackId" value=" trackId "></td>
<td><select name="fee" id="fee">
<option selected="selected">Setup fee</option>
<option>Training Fee</option>
<option>Misc Fee</option>
</select>
</td>
<td><input type="text" name="cancelledDate"></td>
<td><input type="button" name="feePlus" value=" !! "></td>
<td><input type='button' value=' deleteRow ' onclick='deleteRow(this.parentNode.parentNode.rowIndex)'/></td>
</td>
</tr>
</tbody>
</table>
<br>
<table align="center">
<tr>
<td><input type="button" value=" addSite "></td>
</tr>
</table>
</form>
</body>
</html>
Web Languages and StandardsJavaScript
Last Comment
kadaba