Solved

Problem with dynamic combobox

Posted on 2008-10-06
4
556 Views
Last Modified: 2013-11-19
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='&#9660;' 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 &nbsp;</td>
		<td><input type="text" id="siteName"><input type="button" hidefocus="1" value="&#9660;"  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="&#9660;"  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>

Open in new window

0
Comment
Question by:Isotropes
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
4 Comments
 
LVL 15

Expert Comment

by:MMDeveloper
ID: 22649094
define "not working properly"
0
 

Author Comment

by:Isotropes
ID: 22649599
Hi i have inserted the updated code.. My problem is with the dynamically generated editable combo boxes. If i click the editable combo drop-down button the drop down list of the first dynamically generated is always droping down instead the drop down of the selected combox should drop down :)
Please make a reply soon.
<html>
<head>
<title> Add Site Details </title>
 
<script language="javascript">
 
function addLocationProduct(i)
{
	var myTableSample = 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='dynaLoc' id='dynaLoc'/><input type='button' hidefocus='1' value='&#9660;' onclick=\"menuActivate('dynaLoc', 'dynaDiv', 'dynaSelect')\"/><div id='dynaDiv' style='position:absolute; display:none; top:0px; left:0px;z-index:10000' onmouseover=\"oOverMenu='dynaDiv';\" onmouseout=\"oOverMenu=false;\"><select size='4' id='dynaSelect' style='width: 150; border-style: none' onclick=\"textSet('dynaLoc',this.value);\"       onkeypress=\"comboKey('dynaLoc', this.value);\"><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>";
 
	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);
	myTableSample.appendChild(newTR);
}
 
function deleteRow(i){ 
	alert(i);
   document.getElementById('myTable').deleteRow(i);
}
 
	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)
{
	alert("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;
 
</script>
</head>
 
<body>
	<table>
		<tr>
			<td>SITE DETAILS</td>
		</tr>
	</table>
 
   <table>
		<tr>
			<td>Site Name &nbsp;</td>
			<td><input type="text" id="siteName"><input type="button" hidefocus="1" value="&#9660;"  onclick="menuActivate('siteName', 'siteNameDiv', 'siteNameSelect')">
				<div id="siteNameDiv" style="position:absolute; display:none; top:0px; left:0px;z-index:10000" onmouseover="oOverMenu='siteNameDiv';"
			onmouseout="oOverMenu=false;">
				<select size="4" id="siteNameSelect" style="width: 150; border-style: none" onclick="textSet('siteName',this.value);"       onkeypress="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="&#9660;"  onclick="menuActivate('location', 'locationDiv', 'locationSelect')">
				<div id="locationDiv" style="position:absolute; display:none; top:0px; left:0px;z-index:10000" onmouseover="oOverMenu='locationDiv';"
			onmouseout="oOverMenu=false;">
				<select size="4" id="locationSelect" style="width: 150; border-style: none" onclick="textSet('location',this.value);"       onkeypress="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>
		</tr>
	  </tbody>
	</table>
<br>
	<table align="center">
		<tr>
			<td><input type="button" value=" addSite "></td>
		</tr>
	</table>
</body>
</html>

Open in new window

0
 
LVL 22

Accepted Solution

by:
kadaba earned 250 total points
ID: 25874497
like this

<html>
<head>
<title> Add Site Details </title>
 
<script language="javascript">
 
function addLocationProduct()
{
	var myTableSample = 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");
 
	var i = document.getElementById("myTable").rows.length;
	newName1.innerHTML="<input type='text' name='dynaLoc"+ i +"' id='dynaLoc"+i+"'/><input type='button' hidefocus='1' value='&#9660;' onclick=\"menuActivate('dynaLoc"+ i +"', 'dynaDiv"+ i +"', 'dynaSelect"+ i +"')\"/><div id='dynaDiv"+ i +"' style='position:absolute; display:none; top:0px; left:0px;z-index:10000' onmouseover=\"oOverMenu='dynaDiv"+ i +"';\" onmouseout=\"oOverMenu=false;\"><select size='4' id='dynaSelect"+ i +"' style='width: 150; border-style: none' onclick=\"textSet('dynaLoc"+ i +"',this.value);\"       onkeypress=\"comboKey('dynaLoc"+ i +"', this.value);\"><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>";
 
	newName2.innerHTML="<input type='text' name='dynamicProduct"+ i +"'/>";
	newName3.innerHTML="<input type='button' name='dynamicProductLookup"+ i +"' value=' ^ '/>";
	newName4.innerHTML="<input type='button' name='generateTrackId"+ i +"' value=' trackId '/>";
	newName5.innerHTML="<select name='dynamicFee"+ i +"'><option selected='selected'>Setup Fee</option><option>Training Fee</option><option>Misc Fee</option></select>";
	newName6.innerHTML="<input type='text' name='siteCancelledDate"+ i +"'/>";
	newName7.innerHTML="<input type='button' name='calendar"+ i +"' 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);
	myTableSample.appendChild(newTR);
}
 
function deleteRow(i){ 
	alert(i);
   document.getElementById('myTable').deleteRow(i);
}
 
	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;
 
</script>
</head>
 
<body>
	<table>
		<tr>
			<td>SITE DETAILS</td>
		</tr>
	</table>
 
   <table>
		<tr>
			<td>Site Name &nbsp;</td>
			<td><input type="text" id="siteName"><input type="button" hidefocus="1" value="&#9660;"  onclick="menuActivate('siteName', 'siteNameDiv', 'siteNameSelect')">
				<div id="siteNameDiv" style="position:absolute; display:none; top:0px; left:0px;z-index:10000" onmouseover="oOverMenu='siteNameDiv';"
			onmouseout="oOverMenu=false;">
				<select size="4" id="siteNameSelect" style="width: 150; border-style: none" onclick="textSet('siteName',this.value);"       onkeypress="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()"></td>
		</tr>
   </table>
 
   <table>
	 <tbody id='myTable'>
		<tr>
			<td><input type="text" id="location"><input type="button" hidefocus="1" value="&#9660;"  onclick="menuActivate('location', 'locationDiv', 'locationSelect')">
				<div id="locationDiv" style="position:absolute; display:none; top:0px; left:0px;z-index:10000" onmouseover="oOverMenu='locationDiv';"
			onmouseout="oOverMenu=false;">
				<select size="4" id="locationSelect" style="width: 150; border-style: none" onclick="textSet('location',this.value);"       onkeypress="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>
		</tr>
	  </tbody>
	</table>
<br>
	<table align="center">
		<tr>
			<td><input type="button" value=" addSite "></td>
		</tr>
	</table>
</body>
</html>

Open in new window

0

Featured Post

PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
Viewers will learn about the regular for loop in Java and how to use it. Definition: Break the for loop down into 3 parts: Syntax when using for loops: Example using a for loop:
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

737 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question