Member Avatar for jsvanc

I have a web page where the users are supposed to be able to click a button to add a new table row. I have tried various javascripts found online but I am not a javascript person. The page is written in html and asp. I dynamically fill in the dropdown boxes from a database which change for whatever is selected from the first dropdown box. below is the code for the entire webpage. The first screenshot is when the page opens, the second screenshot is if they were to click the plus sign next to Monday. Any help on this would be greatly appreciated.

<!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>
<%
if request("weekending") <> "" then
	thisdate = cdate(request("weekending"))
	thisday = weekday(thisdate)
	fdtw=dateadd("d", -thisday, thisdate) +1
	ldtw=fdtw+6
Else
	today=weekday(date())
	fdtw=dateadd("d", -today, date()) +1
	ldtw=fdtw+6
End If
%>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>KFSA Route Sheet</title>
<script language="javascript" src="modules/popupcal/popcalendarroutesheet.js">
</script>

<script src="/modules/combobox/dhtmlxcommon.js"></script>
<script src="/modules/combobox/dhtmlxcombo.js"></script>
<script src="/modules/combobox/ext/dhtmlxcombo_whp.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="/modules/combobox/dhtmlxcombo.css"/>
<script type="text/javascript">
	window.dhx_globalImgPath="/modules/combobox/";
</script>
<script language="javascript" type="text/javascript">
function submitexpense(thisValue) {
document.routesheet.subdate.value=thisValue;
document.routesheet.action='expense.asp?addedit=add';
document.routesheet.submit();
}
</script>
<script language="javascript" type="text/javascript">
function submitcontinue(thisValue) {
document.routesheet.subdate.value=thisValue;
document.routesheet.action='modules/addroute.asp';
document.routesheet.submit();
}
</script>
<script language="javascript" type="text/javascript">
function showCols(thisValue) {
if (document.getElementById("type"+thisValue).value=="Existing") {
document.getElementById("leavediv"+thisValue).style.display = 'none';
document.getElementById("meetingdiv"+thisValue).style.display = 'none';
document.getElementById("clientdiv"+thisValue).style.display = '';
document.getElementById("purpose"+thisValue).disabled = false;
}
else if (document.getElementById("type"+thisValue).value=="Prospect") {
document.getElementById("leavediv"+thisValue).style.display = 'none';
document.getElementById("meetingdiv"+thisValue).style.display = 'none';
document.getElementById("clientdiv"+thisValue).style.display = '';
document.getElementById("purpose"+thisValue).disabled = false;
}
else if (document.getElementById("type"+thisValue).value=="Trade") {
document.getElementById("leavediv"+thisValue).style.display = 'none';
document.getElementById("meetingdiv"+thisValue).style.display = '';
document.getElementById("clientdiv"+thisValue).style.display = 'none';
document.getElementById("purpose"+thisValue).disabled = true;
}
else if (document.getElementById("type"+thisValue).value=="Meeting") {
document.getElementById("leavediv"+thisValue).style.display = 'none';
document.getElementById("meetingdiv"+thisValue).style.display = '';
document.getElementById("clientdiv"+thisValue).style.display = 'none';
document.getElementById("purpose"+thisValue).disabled = true;
}
else if (document.getElementById("type"+thisValue).value=="Office") {
document.getElementById("leavediv"+thisValue).style.display = 'none';
document.getElementById("meetingdiv"+thisValue).style.display = 'none';
document.getElementById("clientdiv"+thisValue).style.display = '';
document.getElementById("purpose"+thisValue).disabled = false;
}
else if (document.getElementById("type"+thisValue).value=="Leave") {
document.getElementById("leavediv"+thisValue).style.display = '';
document.getElementById("meetingdiv"+thisValue).style.display = 'none';
document.getElementById("clientdiv"+thisValue).style.display = 'none';
document.getElementById("purpose"+thisValue).disabled = true;
}
else {
document.getElementById("leavediv"+thisValue).style.display = 'none';
document.getElementById("meetingdiv"+thisValue).style.display = 'none';
document.getElementById("clientdiv"+thisValue).style.display = '';
document.getElementById("purpose"+thisValue).disabled = false;
}
}
</script>

</head>

<body>
<%
response.write(request("adddate") & "<br>")
'response.write("First day of this week: " & fdtw & "<br>")
'response.write("Last day of this week: " & ldtw)

Set oConn = Server.CreateObject("ADODB.Connection")
Set oRS = Server.CreateObject("ADODB.Recordset")
		
oConn.ConnectionString = "DSN=EbixClient;uid=********;pwd=*********"
		
oConn.Open
oRS.Open "Select Client_Code, Client_Name, Client_FName, Client_City, Client_State From dbo.Client_List WITH (NOLOCK) ORDER By Client_FName", oConn

'Now, read the Recordset into a 2d array
	Dim ClientListValues
	ClientListValues = oRS.GetRows()

oRS.Close

oRS.Open "Select DISTINCT ACC_DISP_NUMBER, ACC_DESCRIPTION FROM dbo.GL_ACCOUNTS WITH (NOLOCK) WHERE ((ACC_DISP_NUMBER >= 6550.00 AND ACC_DISP_NUMBER <= 6551.00) OR (ACC_DISP_NUMBER >= 6600.00 AND ACC_DISP_NUMBER <= 6601.00)) ORDER By ACC_DESCRIPTION", oConn

	Dim MeetingListValues
	MeetingListValues = oRS.GetRows()
	
oRS.Close
oConn.Close
Set oRS = Nothing
Set oConn = Nothing

Const MyClient_Code = 0
Const MyClient_Name = 1
Const MyClient_FName = 2
Const MyClient_City = 3
Const MyClient_State = 4

Const MyMeeting_Number = 0
Const MyMeeting_Desc = 1
%>
	<form name="routesheet" action="" method="post">
	<table width="1000" align="center" cellpadding="2" cellspacing="0">
		<tr bgcolor="black">
			<td border="0">
				<font face="arial" size="2" color="white"><b>Travel & Expense Report - KFSA</b></font>
			</td>
			<td align="right" border="0">
				<font face="arial" size="2" color="white"><b>Route Sheet for <%=Session("fname")%></b></font>
			</td>
		</tr>
	</table>
	<table align="center">
		<tr>
			<td align=center>
				<font face=Arial size=2><b>Week Ending:&nbsp;&nbsp;</b></font><input id="we" style="text-align:center; background-color:#CCCCCC" type="text" size="12" name="weekending" value="<%=ldtw%>" onchange="this.form.submit();" readonly/><img alt="popup calendar" src="Images/calendar.jpg" align="center" width="16" height="16" onclick="popUpCalendar(this, routesheet.weekending, 'mm/dd/yyyy')"/>
			</td>
		</tr>
	</table>
	<table align="center" width="1000" cellspacing="0" cellpadding="0">
		<tr bgcolor="black" style="border: 2px solid #FFFFFF">
			<td align="center" valign="bottom" style="border-right-style: solid; border-width: 2px; border-color: #FFFFFF">
				<font face="Arial" size="2" color="white"><b>Date:</b></font>
			</td>
			<td align="center" valign="bottom" style="border-right-style: solid; border-width: 2px; border-color: #FFFFFF">
				<font face="Arial" size="2" color="white"><b>Type:</b></font>
			</td>
			<td align="center" valign="bottom" style="border-right-style: solid; border-width: 2px; border-color: #FFFFFF">
				<font face="Arial" size="2" color="white"><b>Client/Description:</b></font>
			</td>
			<td align="center" valign="bottom" style="border-right-style: solid; border-width: 2px; border-color: #FFFFFF">
				<font face="Arial" size="2" color="white"><b>Purpose:</b></font>
			</td>
			<% if request.querystring("addedit")="edit" Then %>
			<td align="center" valign="bottom" style="border-right-style: solid; border-width: 2px; border-color: #FFFFFF">
				<font face="Arial" size="2" color="white"><b>Add Mileage/Expense:</b></font>
			</td>
			<td align="center">
				<table>
					<tr>
						<td colspan="3">
							<font face="Arial" size="2" color="white"><b>Per Diem:</b></font>
						</td>
					</tr>
					<tr>
						<td>
							<font face="Arial" size="2" color="white"><b>BKFST</b></font>
							<font face="Arial" size="2" color="white"><b>LUNCH</b></font>
							<font face="Arial" size="2" color="white"><b>DINNR</b></font>
						</td>
					</tr>
				</table>
			</td>
			<% end if %>
		</tr>
		<% for i = 0 to 6 %>
		<div id="route<%=i%>">
		<tr height="50px">
			<td width="125px" style="border-bottom:1px solid #000000">
				<table>
					<tr>
						<td>
							<input type="image" name="plus<%=i%>" value="plus<%=i%>" src="images/plus.png" alt="Add Another Stop" onclick="addroute(<%=i%>);"/>
						</td>
						<td style="text-align: center; width: 100px;">
							<font face="Arial" size="2" color="black"/><b><%=WeekdayName(Weekday(fdtw)+i)%></b><br/><font size="1"><%=fdtw+i%></font>
							<input type="hidden" name="weekday<%=i%>" value="<%=fdtw+i%>"/>
						</td>
					</tr>
				</table>
			</td>
			<td style="border-bottom:1px solid #000000; text-align: center;">
				<select id="type<%=i%>" name="type<%=i%>" onchange="showCols(<%=i%>);">
					<option value="Select">Select Type...</option>
					<option value="Existing">Existing Client</option>
					<option value="Prospect">Prospect</option>
					<option value="Trade">Trade Show</option>
					<option value="Meeting">Meeting</option>
					<option value="Office">In Office</option>
					<option value="Leave">Leave Request</option>
				</select>
			</td>
			<td style="border-bottom:1px solid #000000; text-align: center;">
				<div id="leavediv<%=i%>" style="display:none;">
					<select name="leave<%=i%>" id="leave<%=i%>">
						<option value=""></option>
						<option value="Vacation">Vacation</option>
						<option value="Sick">Sick</option>
						<option value="PersonalLeave">Personal Leave</option>
						<option value="Birthday">Birthday</option>
						<option value="Funderal">Funeral</option>
						<option value="JurtyDuty">Jury Duty</option>
					</select>
					<script>
						var z=dhtmlXComboFromSelect("leave<%=i%>",200);
						z.enableFilteringMode(true);
						z.setOptionWidth(450);
					</script>
				</div>
				<div id="meetingdiv<%=i%>" style="display:none;">
					<select name="meeting<%=i%>" id="meeting<%=i%>">
						<option value=""></option>
						<% For mlvcounter = 0 to UBound(MeetingListValues,2) %>
							<option value="<%=(MeetingListValues(MyMeeting_Number,mlvcounter))%>"><%=MeetingListValues(MyMeeting_Desc,mlvcounter)%></option>
						<% Next %>
					</select>
					<script>
						var z=dhtmlXComboFromSelect("meeting<%=i%>",200);
						z.enableFilteringMode(true);
						z.setOptionWidth(450);
					</script>
				</div>
				<div id="clientdiv<%=i%>" style="display:block;">
					<select name="client<%=i%>" id="client<%=i%>">
						<option value=""></option>
						<% For rowcounter = 0 To UBound(ClientListValues,2) %>
							<option value="<%=(ClientListValues(MyClient_Code,rowcounter))%>"><%=ClientListValues(MyClient_FName,rowcounter) & " - " & ClientListValues(MyClient_City,rowcounter) & ", " & ClientListValues(MyClient_State,rowcounter)%></option>
						<% Next %>
					</select>
					<script>
						var z=dhtmlXComboFromSelect("client<%=i%>",200);
						z.enableFilteringMode(true);
						z.setOptionWidth(450);
					</script>
				</div>
			</td>
			<td style="border-bottom:1px solid #000000; text-align: center;">
				<select id="purpose<%=i%>" name="purpose<%=i%>" style="display:block">
					<option value="Select">Select Purpose...</option>
					<option value="Renewal">Renewal</option>
					<option value="New_Business">New Business</option>
					<option value="Claim_Related">Claim Related</option>
					<option value="Annual_Mtg">Annual Meeting</option>
					<option value="BOD_Review">BOD Review</option>
					<option value="Other">Other</option>
				</select>
			</td>
			<% if request.querystring("addedit")="edit" Then %>
			<td style="border-bottom:1px solid #000000; text-align: center;">
				<input type="submit" value="Add Exp" name="Expense<%=i%>" onclick="submitexpense(<%=i%>)"/>&nbsp;&nbsp;
				<input type="submit" value="Add Mlge" name="Mileage<%=i%>" onclick="this.form.action='mileage.asp'"/>
			</td>
			<td align="center" style="border-bottom:1px solid #000000">
				<table>
					<tr>
						<td>
							<input type="checkbox" name="BKFST<%=i%>"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						</td>
						<td>
							<input type="checkbox" name="LUNCH<%=i%>"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						</td>
						<td>
							<input type="checkbox" name="DINNR<%=i%>"/>
						</td>
					</tr>
				</table>
			</td>
			<% end if %>
		</tr>
		</div>		
		<% next %>
	</table>
	<table align="center" width="1000" cellspacing="0" cellpadding="0">
		<tr align="right">
			<td>
				&nbsp;<br/>
				<input type="submit" value="Continue..." name="continue" onclick="submitcontinue(<%=i%>)"/>
			</td>
		</tr>
	</table>
	<input type="hidden" value="" name="subdate"/>
	<input type="hidden" value="" name="adddate"/>
	</form>
</body>

</html>
<!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>
<%
if request("weekending") <> "" then
	thisdate = cdate(request("weekending"))
	thisday = weekday(thisdate)
	fdtw=dateadd("d", -thisday, thisdate) +1
	ldtw=fdtw+6
Else
	today=weekday(date())
	fdtw=dateadd("d", -today, date()) +1
	ldtw=fdtw+6
End If
%>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>KFSA Route Sheet</title>
<script language="javascript" src="modules/popupcal/popcalendarroutesheet.js">
</script>

<script src="/modules/combobox/dhtmlxcommon.js"></script>
<script src="/modules/combobox/dhtmlxcombo.js"></script>
<script src="/modules/combobox/ext/dhtmlxcombo_whp.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="/modules/combobox/dhtmlxcombo.css"/>
<script type="text/javascript">
	window.dhx_globalImgPath="/modules/combobox/";
</script>
<script language="javascript" type="text/javascript">
function submitexpense(thisValue) {
document.routesheet.subdate.value=thisValue;
document.routesheet.action='expense.asp?addedit=add';
document.routesheet.submit();
}
</script>
<script language="javascript" type="text/javascript">
function submitcontinue(thisValue) {
document.routesheet.subdate.value=thisValue;
document.routesheet.action='modules/addroute.asp';
document.routesheet.submit();
}
</script>
<script language="javascript" type="text/javascript">
function showCols(thisValue) {
if (document.getElementById("type"+thisValue).value=="Existing") {
document.getElementById("leavediv"+thisValue).style.display = 'none';
document.getElementById("meetingdiv"+thisValue).style.display = 'none';
document.getElementById("clientdiv"+thisValue).style.display = '';
document.getElementById("purpose"+thisValue).disabled = false;
}
else if (document.getElementById("type"+thisValue).value=="Prospect") {
document.getElementById("leavediv"+thisValue).style.display = 'none';
document.getElementById("meetingdiv"+thisValue).style.display = 'none';
document.getElementById("clientdiv"+thisValue).style.display = '';
document.getElementById("purpose"+thisValue).disabled = false;
}
else if (document.getElementById("type"+thisValue).value=="Trade") {
document.getElementById("leavediv"+thisValue).style.display = 'none';
document.getElementById("meetingdiv"+thisValue).style.display = '';
document.getElementById("clientdiv"+thisValue).style.display = 'none';
document.getElementById("purpose"+thisValue).disabled = true;
}
else if (document.getElementById("type"+thisValue).value=="Meeting") {
document.getElementById("leavediv"+thisValue).style.display = 'none';
document.getElementById("meetingdiv"+thisValue).style.display = '';
document.getElementById("clientdiv"+thisValue).style.display = 'none';
document.getElementById("purpose"+thisValue).disabled = true;
}
else if (document.getElementById("type"+thisValue).value=="Office") {
document.getElementById("leavediv"+thisValue).style.display = 'none';
document.getElementById("meetingdiv"+thisValue).style.display = 'none';
document.getElementById("clientdiv"+thisValue).style.display = '';
document.getElementById("purpose"+thisValue).disabled = false;
}
else if (document.getElementById("type"+thisValue).value=="Leave") {
document.getElementById("leavediv"+thisValue).style.display = '';
document.getElementById("meetingdiv"+thisValue).style.display = 'none';
document.getElementById("clientdiv"+thisValue).style.display = 'none';
document.getElementById("purpose"+thisValue).disabled = true;
}
else {
document.getElementById("leavediv"+thisValue).style.display = 'none';
document.getElementById("meetingdiv"+thisValue).style.display = 'none';
document.getElementById("clientdiv"+thisValue).style.display = '';
document.getElementById("purpose"+thisValue).disabled = false;
}
}
</script>

</head>

<body>
<%
response.write(request("adddate") & "<br>")
'response.write("First day of this week: " & fdtw & "<br>")
'response.write("Last day of this week: " & ldtw)

Set oConn = Server.CreateObject("ADODB.Connection")
Set oRS = Server.CreateObject("ADODB.Recordset")
		
oConn.ConnectionString = "DSN=EbixClient;uid=********;pwd=*********"
		
oConn.Open
oRS.Open "Select Client_Code, Client_Name, Client_FName, Client_City, Client_State From dbo.Client_List WITH (NOLOCK) ORDER By Client_FName", oConn

'Now, read the Recordset into a 2d array
	Dim ClientListValues
	ClientListValues = oRS.GetRows()

oRS.Close

oRS.Open "Select DISTINCT ACC_DISP_NUMBER, ACC_DESCRIPTION FROM dbo.GL_ACCOUNTS WITH (NOLOCK) WHERE ((ACC_DISP_NUMBER >= 6550.00 AND ACC_DISP_NUMBER <= 6551.00) OR (ACC_DISP_NUMBER >= 6600.00 AND ACC_DISP_NUMBER <= 6601.00)) ORDER By ACC_DESCRIPTION", oConn

	Dim MeetingListValues
	MeetingListValues = oRS.GetRows()
	
oRS.Close
oConn.Close
Set oRS = Nothing
Set oConn = Nothing

Const MyClient_Code = 0
Const MyClient_Name = 1
Const MyClient_FName = 2
Const MyClient_City = 3
Const MyClient_State = 4

Const MyMeeting_Number = 0
Const MyMeeting_Desc = 1
%>
	<form name="routesheet" action="" method="post">
	<table width="1000" align="center" cellpadding="2" cellspacing="0">
		<tr bgcolor="black">
			<td border="0">
				<font face="arial" size="2" color="white"><b>Travel & Expense Report - KFSA</b></font>
			</td>
			<td align="right" border="0">
				<font face="arial" size="2" color="white"><b>Route Sheet for <%=Session("fname")%></b></font>
			</td>
		</tr>
	</table>
	<table align="center">
		<tr>
			<td align=center>
				<font face=Arial size=2><b>Week Ending:&nbsp;&nbsp;</b></font><input id="we" style="text-align:center; background-color:#CCCCCC" type="text" size="12" name="weekending" value="<%=ldtw%>" onchange="this.form.submit();" readonly/><img alt="popup calendar" src="Images/calendar.jpg" align="center" width="16" height="16" onclick="popUpCalendar(this, routesheet.weekending, 'mm/dd/yyyy')"/>
			</td>
		</tr>
	</table>
	<table align="center" width="1000" cellspacing="0" cellpadding="0">
		<tr bgcolor="black" style="border: 2px solid #FFFFFF">
			<td align="center" valign="bottom" style="border-right-style: solid; border-width: 2px; border-color: #FFFFFF">
				<font face="Arial" size="2" color="white"><b>Date:</b></font>
			</td>
			<td align="center" valign="bottom" style="border-right-style: solid; border-width: 2px; border-color: #FFFFFF">
				<font face="Arial" size="2" color="white"><b>Type:</b></font>
			</td>
			<td align="center" valign="bottom" style="border-right-style: solid; border-width: 2px; border-color: #FFFFFF">
				<font face="Arial" size="2" color="white"><b>Client/Description:</b></font>
			</td>
			<td align="center" valign="bottom" style="border-right-style: solid; border-width: 2px; border-color: #FFFFFF">
				<font face="Arial" size="2" color="white"><b>Purpose:</b></font>
			</td>
			<% if request.querystring("addedit")="edit" Then %>
			<td align="center" valign="bottom" style="border-right-style: solid; border-width: 2px; border-color: #FFFFFF">
				<font face="Arial" size="2" color="white"><b>Add Mileage/Expense:</b></font>
			</td>
			<td align="center">
				<table>
					<tr>
						<td colspan="3">
							<font face="Arial" size="2" color="white"><b>Per Diem:</b></font>
						</td>
					</tr>
					<tr>
						<td>
							<font face="Arial" size="2" color="white"><b>BKFST</b></font>
							<font face="Arial" size="2" color="white"><b>LUNCH</b></font>
							<font face="Arial" size="2" color="white"><b>DINNR</b></font>
						</td>
					</tr>
				</table>
			</td>
			<% end if %>
		</tr>
		<% for i = 0 to 6 %>
		<div id="route<%=i%>">
		<tr height="50px">
			<td width="125px" style="border-bottom:1px solid #000000">
				<table>
					<tr>
						<td>
							<input type="image" name="plus<%=i%>" value="plus<%=i%>" src="images/plus.png" alt="Add Another Stop" onclick="addroute(<%=i%>);"/>
						</td>
						<td style="text-align: center; width: 100px;">
							<font face="Arial" size="2" color="black"/><b><%=WeekdayName(Weekday(fdtw)+i)%></b><br/><font size="1"><%=fdtw+i%></font>
							<input type="hidden" name="weekday<%=i%>" value="<%=fdtw+i%>"/>
						</td>
					</tr>
				</table>
			</td>
			<td style="border-bottom:1px solid #000000; text-align: center;">
				<select id="type<%=i%>" name="type<%=i%>" onchange="showCols(<%=i%>);">
					<option value="Select">Select Type...</option>
					<option value="Existing">Existing Client</option>
					<option value="Prospect">Prospect</option>
					<option value="Trade">Trade Show</option>
					<option value="Meeting">Meeting</option>
					<option value="Office">In Office</option>
					<option value="Leave">Leave Request</option>
				</select>
			</td>
			<td style="border-bottom:1px solid #000000; text-align: center;">
				<div id="leavediv<%=i%>" style="display:none;">
					<select name="leave<%=i%>" id="leave<%=i%>">
						<option value=""></option>
						<option value="Vacation">Vacation</option>
						<option value="Sick">Sick</option>
						<option value="PersonalLeave">Personal Leave</option>
						<option value="Birthday">Birthday</option>
						<option value="Funderal">Funeral</option>
						<option value="JurtyDuty">Jury Duty</option>
					</select>
					<script>
						var z=dhtmlXComboFromSelect("leave<%=i%>",200);
						z.enableFilteringMode(true);
						z.setOptionWidth(450);
					</script>
				</div>
				<div id="meetingdiv<%=i%>" style="display:none;">
					<select name="meeting<%=i%>" id="meeting<%=i%>">
						<option value=""></option>
						<% For mlvcounter = 0 to UBound(MeetingListValues,2) %>
							<option value="<%=(MeetingListValues(MyMeeting_Number,mlvcounter))%>"><%=MeetingListValues(MyMeeting_Desc,mlvcounter)%></option>
						<% Next %>
					</select>
					<script>
						var z=dhtmlXComboFromSelect("meeting<%=i%>",200);
						z.enableFilteringMode(true);
						z.setOptionWidth(450);
					</script>
				</div>
				<div id="clientdiv<%=i%>" style="display:block;">
					<select name="client<%=i%>" id="client<%=i%>">
						<option value=""></option>
						<% For rowcounter = 0 To UBound(ClientListValues,2) %>
							<option value="<%=(ClientListValues(MyClient_Code,rowcounter))%>"><%=ClientListValues(MyClient_FName,rowcounter) & " - " & ClientListValues(MyClient_City,rowcounter) & ", " & ClientListValues(MyClient_State,rowcounter)%></option>
						<% Next %>
					</select>
					<script>
						var z=dhtmlXComboFromSelect("client<%=i%>",200);
						z.enableFilteringMode(true);
						z.setOptionWidth(450);
					</script>
				</div>
			</td>
			<td style="border-bottom:1px solid #000000; text-align: center;">
				<select id="purpose<%=i%>" name="purpose<%=i%>" style="display:block">
					<option value="Select">Select Purpose...</option>
					<option value="Renewal">Renewal</option>
					<option value="New_Business">New Business</option>
					<option value="Claim_Related">Claim Related</option>
					<option value="Annual_Mtg">Annual Meeting</option>
					<option value="BOD_Review">BOD Review</option>
					<option value="Other">Other</option>
				</select>
			</td>
			<% if request.querystring("addedit")="edit" Then %>
			<td style="border-bottom:1px solid #000000; text-align: center;">
				<input type="submit" value="Add Exp" name="Expense<%=i%>" onclick="submitexpense(<%=i%>)"/>&nbsp;&nbsp;
				<input type="submit" value="Add Mlge" name="Mileage<%=i%>" onclick="this.form.action='mileage.asp'"/>
			</td>
			<td align="center" style="border-bottom:1px solid #000000">
				<table>
					<tr>
						<td>
							<input type="checkbox" name="BKFST<%=i%>"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						</td>
						<td>
							<input type="checkbox" name="LUNCH<%=i%>"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						</td>
						<td>
							<input type="checkbox" name="DINNR<%=i%>"/>
						</td>
					</tr>
				</table>
			</td>
			<% end if %>
		</tr>
		</div>		
		<% next %>
	</table>
	<table align="center" width="1000" cellspacing="0" cellpadding="0">
		<tr align="right">
			<td>
				&nbsp;<br/>
				<input type="submit" value="Continue..." name="continue" onclick="submitcontinue(<%=i%>)"/>
			</td>
		</tr>
	</table>
	<input type="hidden" value="" name="subdate"/>
	<input type="hidden" value="" name="adddate"/>
	</form>
</body>

</html>
routesheet1.jpg 122.38 KB routesheet.jpg 134.29 KB
  • 2 Contributors
  • 25 Replies
  • 275 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by jsvanc

Recommended Answers

All 25 Replies

Member Avatar for Airshow

JSV,

Firstly, pleeeeeeeease simplify showCols(){} thus:

function showCols(thisValue) {
	switch(document.getElementById("type"+thisValue).value){
		case "Trade":
		case "Meeting":
			document.getElementById("leavediv"+thisValue).style.display = 'none';
			document.getElementById("meetingdiv"+thisValue).style.display = '';
			document.getElementById("clientdiv"+thisValue).style.display = 'none';
			document.getElementById("purpose"+thisValue).disabled = true;
		break;
		case "Leave":
			document.getElementById("leavediv"+thisValue).style.display = '';
			document.getElementById("meetingdiv"+thisValue).style.display = 'none';
			document.getElementById("clientdiv"+thisValue).style.display = 'none';
			document.getElementById("purpose"+thisValue).disabled = true;
		break;
		case "Existing":
		case "Prospect":
		case "Office":
		default:
			document.getElementById("leavediv"+thisValue).style.display = 'none';
			document.getElementById("meetingdiv"+thisValue).style.display = 'none';
			document.getElementById("clientdiv"+thisValue).style.display = '';
			document.getElementById("purpose"+thisValue).disabled = false;
	}
}

Unless I've made a mistake, this should do exactly the same job.

Now try this - should be something like what you're looking for:

function addroute(n){
	var day = document.getElementById('day' + n);//Find the <tbody> wrapper for the day in question
	if(!day || !day.hasChildNodes) { return false; }
	firstRoute = day.firstChild;
	while(firstRoute.nodeType !== 1){ firstRoute = firstRoute.nextSibling; }//FF "textnode buster"
	var newRoute = firstRoute.cloneNode(true);//Clone the first route for the day in question
	day.tally = (day.tally) ? day.tally++ : 0;//Remember how many routes we have added
	var suffix = '_' + day.tally;//Compose the id/name suffix
	renumberIt(newRoute, suffix);//Add suffix to all id and name attributes in the cloned row (to make them unique)
	var newCells = newRoute.childNodes;
	for(var i=0; i<newCells.length; i++){
		if(newCells[i].getAttribute('blankMe') == "1"){ newCells[i].innerHTML = '&nbsp;'; }
	}
	day.appendChild(newRoute);
	return false;//critical to suppress hyperlink action.
}
function renumberIt(targetElement, suffix){
	if(targetElement.nodeType != 1) { return; }
	if(targetElement.id) { targetElement.id += suffix; }
	if(targetElement.name) { targetElement.name += suffix; }
	var ch = targetElement.childNodes;
	for(var i=0; i<ch.length; i++){
		renumberIt(ch[i], suffix);//drilldown with a recursive call.
	}
}

This is a snippet from the middle of your html.

....
	<% for i = 0 to 6 %>
	<tbody id="day<%=i%>" class="day">
	<tr height="50px">
	<td blankMe="1" width="125px" style="border-bottom:1px solid #000000">
		<table>
		<tr>
		<td><a href="" alt="Add Another Stop" onclick="return addroute(<%=i%>);"><img src="images/plus.png" border="0" /></a></td>
		<td style="text-align: center; width: 100px;">
		....
	....
	<% end if %>
	</tr>
	</tbody>
	<% next %>
	</table>
	....

Notes:

  1. Use <tbody></tbody> structure within table instead of <div></div>
  2. <a><img ...></a> instead of <input type="image" ...>
  3. Give cells whose content you want to be blanked in the new row a custom attribute of blankMe="1"
  4. Return false from addroute() and hence from its onclick call to suppress hyperlink action (or form submission or whatever).
  5. Note, embedded javascript in the cloned row will not run.
  6. Tested staticly (not asp) so not tested with multiple days (0 to 6 i loop)
Member Avatar for jsvanc

Airshow,

Thank you so much for your help. Most of the code that you supplied worked GREAT!! What didn't work was my onchange call

onchange="showCols(<%=i%>);

My Combobox under the Client/Description Heading wouldn't show any data at all. I'm wondering if this is becuase the onchange wouldn't work. Is there any way to get this working?

Also, if my embedded javascript won't work, then my combobox won't work will it?

Again, thank you for your time. I really do appreciate it. I'm really javascript illiterate so sorry to be such a pain.

If you would like to see the code again, I am attaching it as code.txt file.

Thank you

<!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>
<%
if request("weekending") <> "" then
	thisdate = cdate(request("weekending"))
	thisday = weekday(thisdate)
	fdtw=dateadd("d", -thisday, thisdate) +1
	ldtw=fdtw+6
Else
	today=weekday(date())
	fdtw=dateadd("d", -today, date()) +1
	ldtw=fdtw+6
End If
%>

<%
response.write(request("adddate") & "<br>")
'response.write("First day of this week: " & fdtw & "<br>")
'response.write("Last day of this week: " & ldtw)

Set oConn = Server.CreateObject("ADODB.Connection")
Set oRS = Server.CreateObject("ADODB.Recordset")
		
oConn.ConnectionString = "DSN=EbixClient;uid=********;pwd=********"
		
oConn.Open
oRS.Open "Select Client_Code, Client_Name, Client_FName, Client_City, Client_State From dbo.Client_List WITH (NOLOCK) ORDER By Client_FName", oConn

'Now, read the Recordset into a 2d array
	Dim ClientListValues
	ClientListValues = oRS.GetRows()

oRS.Close

oRS.Open "Select DISTINCT ACC_DISP_NUMBER, ACC_DESCRIPTION FROM dbo.GL_ACCOUNTS WITH (NOLOCK) WHERE ((ACC_DISP_NUMBER >= 6550.00 AND ACC_DISP_NUMBER <= 6551.00) OR (ACC_DISP_NUMBER >= 6600.00 AND ACC_DISP_NUMBER <= 6601.00)) ORDER By ACC_DESCRIPTION", oConn

	Dim MeetingListValues
	MeetingListValues = oRS.GetRows()
	
oRS.Close
oConn.Close
Set oRS = Nothing
Set oConn = Nothing

Const MyClient_Code = 0
Const MyClient_Name = 1
Const MyClient_FName = 2
Const MyClient_City = 3
Const MyClient_State = 4

Const MyMeeting_Number = 0
Const MyMeeting_Desc = 1
%>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>KFSA Route Sheet</title>
<script language="javascript" src="modules/popupcal/popcalendarroutesheet.js">
</script>

<script src="/modules/combobox/dhtmlxcommon.js"></script>
<script src="/modules/combobox/dhtmlxcombo.js"></script>
<script src="/modules/combobox/ext/dhtmlxcombo_whp.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="/modules/combobox/dhtmlxcombo.css"/>
<script type="text/javascript">
	window.dhx_globalImgPath="/modules/combobox/";
</script>
<script language="javascript" type="text/javascript">
function submitexpense(thisValue) {
document.routesheet.subdate.value=thisValue;
document.routesheet.action='expense.asp?addedit=add';
document.routesheet.submit();
}
</script>
<script language="javascript" type="text/javascript">
function submitcontinue(thisValue) {
document.routesheet.subdate.value=thisValue;
document.routesheet.action='modules/addroute.asp';
document.routesheet.submit();
}
</script>
<script language="javascript" type="text/javascript">
function showCols(thisValue) {
	switch(document.getElementById("type"+thisValue).value){
		case "Trade":
		case "Meeting":
			document.getElementById("leavediv"+thisValue).style.display = 'none';
			document.getElementById("meetingdiv"+thisValue).style.display = '';
			document.getElementById("clientdiv"+thisValue).style.display = 'none';
			document.getElementById("purpose"+thisValue).disabled = true;
		break;
		case "Leave":
			document.getElementById("leavediv"+thisValue).style.display = '';
			document.getElementById("meetingdiv"+thisValue).style.display = 'none';
			document.getElementById("clientdiv"+thisValue).style.display = 'none';
			document.getElementById("purpose"+thisValue).disabled = true;
		break;
		case "Existing":
		case "Prospect":
		case "Office":
		default:
			document.getElementById("leavediv"+thisValue).style.display = 'none';
			document.getElementById("meetingdiv"+thisValue).style.display = 'none';
			document.getElementById("clientdiv"+thisValue).style.display = '';
			document.getElementById("purpose"+thisValue).disabled = false;
	}
}
</script>
<script language="javascript" type="text/javascript">
count=25;
function doAddRow(thisValue) {
   var oTbl=document.getElementById('route'+thisValue);
   var tBody = oTbl.getElementsByTagName('tbody')[0];
   var newTR = document.createElement('tr');
   var newTD = document.createElement('td');
   newTD.innerHTML="<table><tr><td style='text-align:center;'>hello</td><td style='text-align:center;'>world</td></tr></table>";
   newTD.innerHTML=newTD.innerHTML+"<td align='center' style='border-bottom:1px solid #000000; text-align: center;'><select id='type"+(thisValue+count)+"' name='type"+(thisValue+count)+"' onchange='showCols("+(thisValue+count)+");'><option value='Select'>Select Type...</option><option value='Existing'>Existing Client</option><option value='Prospect'>Prospect</option><option value='Trade'>Trade Show</option><option value='Meeting'>Meeting</option><option value='Office'>In Office</option><option value='Leave'>Leave Request</option></select></td>";
   newTD.innerHTML=newTD.innerHTML+"<td style='border-bottom:1px solid #000000; text-align: center;' id='desctemp'>"
					"<div id='leavediv"+(thisValue+count)+"' style='display:none;'>"
					"<select name='leave"+(thisValue+count)+"' id='leave"+(thisValue+count)+"'>"
						"<option value=''></option>"
						"<option value='Vacation'>Vacation</option>"
						"<option value='Sick'>Sick</option>"
						"<option value='PersonalLeave'>Personal Leave</option>"
						"<option value='Birthday'>Birthday</option>"
						"<option value='Funeral'>Funeral</option>"
						"<option value='JuryDuty'>Jury Duty</option>"
					"</select>"
				"</div>"
				"<div id='meetingdiv"+(thisValue+count)+"' style='display:none;'>"
					"<select name='meeting"+(thisValue+count)+"' id='meeting"+(thisValue+count)+"'>"
						"<option value=''></option>"
						"<% For mlvcounter = 0 to UBound(MeetingListValues,2) %>"
							"<option value='<%=(MeetingListValues(MyMeeting_Number,mlvcounter))%>'><%=(MeetingListValues(MyMeeting_Desc,mlvcounter))%></option>"
						"<% Next %>"
					"</select>"
				"</div>"
				"<div id='clientdiv"+(thisValue+count)+"' style='display:block;'>"
					"<select name='client"+(thisValue+count)+"' id='client"+(thisValue+count)+"'>"
						"<option value=''></option>"
						"<% For rowcounter = 0 To UBound(ClientListValues,2) %>"
							"<option value='<%=(ClientListValues(MyClient_Code,rowcounter))%>'><%=ClientListValues(MyClient_FName,rowcounter)%> - <%=ClientListValues(MyClient_City,rowcounter)%>, <%=ClientListValues(MyClient_State,rowcounter)%></option>"
						"<% Next %>"
					"</select>"
				"</div>"
			"</td>";
	newTR.appendChild(newTD);
	tBody.appendChild(newTR);
//document.write(oCell.innerHTML);

var z=dhtmlXComboFromSelect('leave'+(thisValue+count),200);
z.enableFilteringMode(true);
z.setOptionWidth(450);

var z=dhtmlXComboFromSelect('meeting'+(thisValue+count),200);
z.enableFilteringMode(true);
z.setOptionWidth(450);

var z=dhtmlXComboFromSelect('client'+(thisValue+count),200);
z.enableFilteringMode(true);
z.setOptionWidth(450);
count = count+1;
}
</script>
<script language="javascript" type="text/javascript">
function addroute(n){
	var day = document.getElementById('day' + n);//Find the <tbody> wrapper for the day in question
	if(!day || !day.hasChildNodes) { return false; }
	firstRoute = day.firstChild;
	while(firstRoute.nodeType !== 1){ firstRoute = firstRoute.nextSibling; }//FF "textnode buster"
	var newRoute = firstRoute.cloneNode(true);//Clone the first route for the day in question
	day.tally = (day.tally) ? day.tally++ : 0;//Remember how many routes we have added
	var suffix = '_' + day.tally;//Compose the id/name suffix
	renumberIt(newRoute, suffix);//Add suffix to all id and name attributes in the cloned row (to make them unique)
	var newCells = newRoute.childNodes;
	for(var i=0; i<newCells.length; i++){
		if(newCells[i].getAttribute('blankMe') == "1"){ newCells[i].innerHTML = '&nbsp;'; }
	}
	day.appendChild(newRoute);
	return false;//critical to suppress hyperlink action.
}
function renumberIt(targetElement, suffix){
	if(targetElement.nodeType != 1) { return; }
	if(targetElement.id) { targetElement.id += suffix; }
	if(targetElement.name) { targetElement.name += suffix; }
	var ch = targetElement.childNodes;
	for(var i=0; i<ch.length; i++){
		renumberIt(ch[i], suffix);//drilldown with a recursive call.
	}
}
</script>
</head>

<body>
	<form name="routesheet" action="modules/addroute.asp" method="post">
	<table width="1000" align="center" cellpadding="2" cellspacing="0">
		<tr bgcolor="black">
			<td border="0">
				<font face="arial" size="2" color="white"><b>Travel &amp; Expense 
				Report - KFSA</b></font>
			</td>
			<td align="right" border="0">
				<font face="arial" size="2" color="white"><b>Route Sheet for <%=Session("fname")%></b></font>
			</td>
		</tr>
	</table>
	<table align="center">
		<tr>
			<td align=center>
				<font face=Arial size=2><b>Week Ending:&nbsp;&nbsp;</b></font><input id="we" style="text-align:center; background-color:#CCCCCC" type="text" size="12" name="weekending" value="<%=ldtw%>" onchange="this.form.submit();" readonly/><img alt="popup calendar" src="Images/calendar.jpg" align="center" width="16" height="16" onclick="popUpCalendar(this, routesheet.weekending, 'mm/dd/yyyy')"/>
			</td>
		</tr>
	</table>
	<% for i = 0 to 1 %>
	<table align="center" width="1000" cellspacing="0" cellpadding="0" id="route<%=i%>" style="border-bottom:1px solid #000000">
	<% If i = o Then %>
		<tr bgcolor="black" style="border: 2px solid #FFFFFF">
			<td align="center" valign="bottom" style="border-right-style: solid; border-width: 2px; border-color: #FFFFFF">
				<font face="Arial" size="2" color="white"><b>Date:</b></font>
			</td>
			<td align="center" valign="bottom" style="border-right-style: solid; border-width: 2px; border-color: #FFFFFF">
				<font face="Arial" size="2" color="white"><b>Type:</b></font>
			</td>
			<td align="center" valign="bottom" style="border-right-style: solid; border-width: 2px; border-color: #FFFFFF">
				<font face="Arial" size="2" color="white"><b>Client/Description:</b></font>
			</td>
			<td align="center" valign="bottom" style="border-right-style: solid; border-width: 2px; border-color: #FFFFFF">
				<font face="Arial" s
Member Avatar for jsvanc

One more thing, can I put a [-] next to the newly created rows in order to delete those rows just in case the user made a mistake and needs to remove an extra row?

Thank you

Member Avatar for Airshow

JSV,

>> What didn't work was my onchange call; onchange="showCols(<%=i%>);
I made a teeny-weeny little critical mistake and overlooked something. Try this:

In function addroute:

//--Find
// day.tally = (day.tally) ? day.tally++ : 0;//Remember how many routes we have added
//--replace with
	day.tally = (typeof day.tally == 'undefined') ? 0 : day.tally+1;//Remember how many routes we have added
//--Find
//	if(newCells[i].getAttribute('blankMe') == "1"){ newCells[i].innerHTML = '&nbsp;'; }
//--Replace with
	try{ if(newCells[i].getAttribute('blankMe') == "1"){ newCells[i].innerHTML = '&nbsp;'; } }//Necessary in FF
	catch(e){ ; }
//--Find
// day.appendChild(newRoute);
//--add after
	resetRow(newRoute, n, suffix);

Add a new javascript function:

function resetRow(row, n, suffix){
	var selects = row.getElementsByTagName('select');
	for(var i=0; i<selects.length; i++){
		selects[i].selectedIndex = 0;
		var baseName = selects[i].id.replace(n + suffix, '');
		switch(baseName){
			case ('leave'):
			case ('meeting'):
			case ('client'):
				try{
					var z=dhtmlXComboFromSelect(x + n + suffix,200);
					z.enableFilteringMode(true);
					z.setOptionWidth(450);
				}
				catch(e){ ; }
			break;
			default: //Do nothing
		}
	}
	var inputs = row.getElementsByTagName('input');
	for(var i=0; i<inputs.length; i++){
		switch(inputs[i].type.toLowerCase()){
			case 'checkbox':
				inputs[i].checked = 0;
			break;
			default: //Do nothing
		}
	}
	showCols(n + suffix);
}

And in the HTML

//--Find
<select id="type<%=i%>" name="type<%=i%>" onchange="showCols(<%=i%>);">
//--Replace with
<select id="type<%=i%>" name="type<%=i%>" onchange="showCols(this.getAttribute('id').replace('type', ''));">
//--(This is messy but gets the job done)

Your "type" combo will now work in cloned rows, which will be reset to neutral settings.

It's also possible that I made a mistake in simplifying showcols . If so, then it will misbehave on your original rows as well as cloned rows. I think your original showcols will still work but try my changes first because I think my simplified showcols is OK.

>> My Combobox under the Client/Description Heading wouldn't show any data at all. ...
I'm not sure what's going on here. Options in the "meeting" and "leave" combos are built server-side in ASP loops. As far as I can tell my cloning process should not affect them - they should be perfect clones of those in the served original. If they are not populated, then I have to suggest looking at the ASP. As I said, I am unable to test it.

>> Also, if my embedded javascript won't work, then my combobox won't work will it?
As far as I can tell, the embedded javascript just gives the commboboxes some go-faster stripes. It doesn't affect their options or basic functionality. Besides, the new resetRow function now includes code to mimic the embedded javascript, so the go-faster gizmos should be preserved (untested).

Let me know how it goes

Airshow

Member Avatar for Airshow

>> can I put a [-] next to the newly created rows in order to delete
Yes but there are implications server-side.

As it stands (without a delete function), it is fairly easy server-side to find which name|value pairs have been submitted in the POST. Names in cloned rows will have _n appended to their baserow's names, so you can loop through with an integer counter and when you find name_n is not set, then the code can be certain that there are no more rows.

Now, say a cloned row was deleted. When you find name_n is not set, there is no longer certainty that there are no more rows.

If you want to delete rows, then either your paradigm for retreiving POST data must be a bit cleverer or you need to take measures client-side to "close the numbering gap" when a row is deleted.

Airshow

Member Avatar for jsvanc

Airshow,

Thank you again for the new code, most of it is working now. On the cloned rows, it is still not populating the Client/Description combobox. The combobox is populated on the main row, so the only thing that I can think of is the javascript. When I get the records to populate that combobox from the database, I am putting the data into an asp array. Should I try to put this data into a javascript array instead? Would that help? The other comboboxes are populated statically so I am thinking it has something to do with the array.

Here is the code for the array in asp --

<select name="client<%=i%>" id="client<%=i%>">
     <option value=""></option>
     <% For rowcounter = 0 To UBound(ClientListValues,2) %>
          <option value="<%=(ClientListValues(MyClient_Code,rowcounter))%>"><%=ClientListValues(MyClient_FName,rowcounter) & " - " & ClientListValues(MyClient_City,rowcounter) & ", " & ClientListValues(MyClient_State,rowcounter)%></option>
     <% Next %>
</select>
<script>
var z=dhtmlXComboFromSelect("client<%=i%>",200);
z.enableFilteringMode(true);
z.setOptionWidth(450);
</script>

Also, don't know if you saw my other post about removing the newly created rows. Can we put a [-] next to each row so in case they added a row that they don't need, they can click on that to delete it.

I really appreciate all the time you have put into this. I hope you can help me with the next problem.

Member Avatar for jsvanc

Sorry, didn't see the post about the deleting of the row. If you can supply the code to remove that would be great. When the data gets posted, I am going to put it all into an array so when I go through the posted information, the array will find all information and return the amount in the array, so it shouldn't be a problem if the numbers aren't consecutive.

Thank you again.

Member Avatar for Airshow

JSV,

OK, here's the remove code.

//--Find
		if(newCells[i].getAttribute('blankMe') == "1"){ newCells[i].innerHTML = '&nbsp;'; }
//--replace with
		if(newCells[i].getAttribute('blankMe') == "1"){ newCells[i].innerHTML = makeDeleteButton(n, suffix); }

//--Add new functions
function deleteRoute(suffix){
	var id = "baseRoute" + suffix;
	var node = document.getElementById(id);
	if(!node) { return; }
	node.parentNode.removeChild(node);
}
function makeDeleteButton(n, suffix){
	return ['<a href="#" onclick="return deleteRoute(\'', (n + suffix), '\')"><img src="images/minus.png" border="0"></a>'].join('');
}
//--Find
	<tr height="50px">
//--replace with 
	<tr id="baseRoute<%=i%>" height="50px">

Of course, that pretty well makes a nonsense of the custom attribute "blankMe". The code won't mind but something like "convertMe" would be more appropriate now.

Airshow

Member Avatar for jsvanc

I finally figured out why the cloned rows won't populate the combobox. This code is the culprit:

<script>
var z=dhtmlXComboFromSelect("leave<%=i%>",200);
z.enableFilteringMode(true);
z.setOptionWidth(450);
</script>

If I take out this code, then everything works correctly. My problem is that this code allows me to type in new values in the dropdown boxes so if they option that they want isn't available, or it is a new option, then they can just type something in. It also allows me to format the dropdown boxes so that they look nice on the page.

Any ideas?

Thanks. Also, thanks for the delete code, I really appreciate everything that you have done to help me with this project.

Member Avatar for Airshow

JSV,

Mmm, very odd because the same code is used for two other comboboxes and I understand they clone OK.

Suggestion: Try commenting out z.enableFilteringMode(true); and z.setOptionWidth(450); . If it still misbehaves, then it must be the dhtmlXComboFromSelect() command (which is the most likely but let's see). Then we'll do a web search to see if anyone has a solution.

Airshow

Member Avatar for Airshow

I've just has a look at the dhtmlx site to see what those commands do, and I've had some thoughts.

Let's give my suggestion above a try and if it fails, then we'll take a diffferent approach to cloning. We'll clone from a dedicated, hidden prototype.... er .... much like in your original code .... which makes me feel pretty stupid .... but this time we will write it directly in HTML rather than in javascript.

This way the dhtmlX code will stand a better chance, by working on unmolested, virgin HTML rather than stuff that it already transformed.

I have a feeling that's the way we are going to go.

Hope that makes sense.

Airshow

Member Avatar for jsvanc

I commented out the lines that you told me and I'm still having the same issue. I would do a web search, but not sure what to search for. This is too bad, becuase your code works so well for everything else. The code for those two other boxes that you were talking about is under the same heading, they just get hidden based on what is selected in the first dropdown box. They don't work either. I have tried to unhide all 3 of them at the same time to see what happens and none of them clone correctly. Do you want me to send you to .js file that is associated with this script?

Thanks again for your help. BTW, not to be bothersome, but my project is due by Thursday, so any help quickly will be great. For now until we get this figured out, I am just going to comment out that entire script, because everything works (except I can't type anything new in) with that commented out.

Member Avatar for Airshow

JSV,

Thurday - sh*t, that's tight. But don't worry, I won't leave you in the lurch.

Your solution to comment out those dhtmlX statements is indeed the best short term fix, though you will indeed loose the extra combobox functionality.

I'm sort of relieved that all three comboboxes are affected, 'cos that means the problem is not so odd.

I Googled and found nothing to help so I'm going to give top priority to my alternative "unmolested prototype" approach.

Stand by for some new code.

Airshow

Member Avatar for jsvanc

Airshow,

Thanks for the update. I did find this on dhtmlX website. Looks like this guy is trying to do the same thing, but since I don't know ANYTHING about javascript, I'm not sure what the answer meant. Take a look at this link.

http://www.dhtmlx.com/docs/products/kb/index.shtml?cat=14&page=3&q=8343

I hope this helps you understand how to make it work. Thanks alot for your help, I really do appreciate it.

Member Avatar for Airshow

JSV,

Good news - I think I've got it working.

I must make a tidy copy for you before posting. Maybe another 30mins.

Airshow

Member Avatar for Airshow

Hold on, I've found a bug .....

Member Avatar for jsvanc

OK.

Waiting (for the most part) patiently.

Thank you,

JSV

Member Avatar for Airshow

It was an odd bug. I could get any two of the three combos working but, no matter what order I put them in, the first and the third would convert OK and the middle one wouldn't!!!

After trying all sorts, I introduced a timout to allow the page to render before calling dhtmlXComboFromSelect(). This works on my computer. The timeout is in the function resetRow() (it's very short and I've left the original line in there). If it gives you problems, then try increasing the timeout from 200 ms to say 500 ms or even 1000 ms (1 second).

File is attached. Change file extension from .txt to .html to browse.

I sincerely hope it works for you.

Airshow

<!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>
<!--%
if request("weekending") <> "" then
	thisdate = cdate(request("weekending"))
	thisday = weekday(thisdate)
	fdtw=dateadd("d", -thisday, thisdate) +1
	ldtw=fdtw+6
Else
	today=weekday(date())
	fdtw=dateadd("d", -today, date()) +1
	ldtw=fdtw+6
End If
%-->
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>KFSA Route Sheet</title>
<script language="javascript" src="modules/popupcal/popcalendarroutesheet.js"></script>
<script src="/modules/combobox/dhtmlxcommon.js"></script>
<script src="/modules/combobox/dhtmlxcombo.js"></script>
<script src="/modules/combobox/ext/dhtmlxcombo_whp.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="/modules/combobox/dhtmlxcombo.css"/>

<script type="text/javascript">
window.dhx_globalImgPath="/modules/combobox/";

function submitexpense(thisValue) {
	document.routesheet.subdate.value=thisValue;
	document.routesheet.action='expense.asp?addedit=add';
	document.routesheet.submit();
}

function submitcontinue(thisValue) {
	document.routesheet.subdate.value=thisValue;
	document.routesheet.action='modules/addroute.asp';
	document.routesheet.submit();
}

function showCols(thisValue) {
	switch(document.getElementById("type"+thisValue).value){
		case "Trade":
		case "Meeting":
			document.getElementById("leavediv"+thisValue).style.display = 'none';
			document.getElementById("meetingdiv"+thisValue).style.display = '';
			document.getElementById("clientdiv"+thisValue).style.display = 'none';
			document.getElementById("purpose"+thisValue).disabled = true;
		break;
		case "Leave":
			document.getElementById("leavediv"+thisValue).style.display = '';
			document.getElementById("meetingdiv"+thisValue).style.display = 'none';
			document.getElementById("clientdiv"+thisValue).style.display = 'none';
			document.getElementById("purpose"+thisValue).disabled = true;
		break;
		case "Existing":
		case "Prospect":
		case "Office":
		default:
			document.getElementById("leavediv"+thisValue).style.display = 'none';
			document.getElementById("meetingdiv"+thisValue).style.display = 'none';
			document.getElementById("clientdiv"+thisValue).style.display = '';
			document.getElementById("purpose"+thisValue).disabled = false;
	}
}

function addroute(n){
	var day = document.getElementById('day' + n);//Find the <tbody> wrapper for the day in question
	var protoContainer = document.getElementById('rowPrototype');
	if(!day || !protoContainer || !protoContainer.hasChildNodes){ return false; }
	proto = protoContainer.firstChild;
	while(proto.nodeType !== 1){ proto = proto.nextSibling; }//FF "textnode buster"
	var newRoute = proto.cloneNode(true);//Clone the prototype row
	day.tally = (typeof day.tally == 'undefined') ? 0 : day.tally+1;//Remember how many routes we have added
	var suffix = n + '_' + day.tally;//Compose the id/name suffix
	renumberIt(newRoute, suffix);//Add suffix to all id and name attributes in the cloned row (to make them unique)
	day.appendChild(newRoute);
	resetRow(newRoute, suffix);
	return false;//critical to suppress hyperlink action.
}
function renumberIt(targetElement, suffix){
	if(targetElement.nodeType != 1) { return; }
	if(targetElement.getAttribute('id')) { targetElement.setAttribute('id', targetElement.getAttribute('id') + suffix); }
	if(targetElement.getAttribute('name')) { targetElement.setAttribute('name', targetElement.getAttribute('name') + suffix); }
	targetElement.setAttribute('rowRef', suffix);
	var ch = targetElement.childNodes;
	for(var i=0; i<ch.length; i++){
		renumberIt(ch[i], suffix);//drilldown with a recursive call.
	}
}
function resetRow(row, suffix){
	var selects = row.getElementsByTagName('select');
	for(var i=0; i<selects.length; i++){
		var baseName = selects[i].id.replace(suffix, '');
		if(baseName=='leave' || baseName=='client' || baseName=='meeting' ){
			//makeComboBox(baseName + suffix);
			setTimeout('makeComboBox(\'' + (baseName+suffix) + '\')', 200);//Odd but necessary.
		}
	}
}
function deleteRoute(suffix){
	var id = "baseRoute" + suffix;
	var node = document.getElementById(id);
	if(!node) { return false; }
	node.parentNode.removeChild(node);
}
function makeDeleteButton(n, suffix){
	return ['<a href="#" onclick="return deleteRoute(\'', (n + suffix), '\')"><img src="images/minus.png" border="0"></a>'].join('');
}
function makeComboBox(id){
	try{
		var z=dhtmlXComboFromSelect(id,200);
		z.enableFilteringMode(true);
		z.setOptionWidth(450);
	}
	catch(e){ ; }
}
</script>
</head>

<body>
<!--%
response.write(request("adddate") & "<br>")
'response.write("First day of this week: " & fdtw & "<br>")
'response.write("Last day of this week: " & ldtw)

Set oConn = Server.CreateObject("ADODB.Connection")
Set oRS = Server.CreateObject("ADODB.Recordset")
		
oConn.ConnectionString = "DSN=EbixClient;uid=********;pwd=*********"
		
oConn.Open
oRS.Open "Select Client_Code, Client_Name, Client_FName, Client_City, Client_State From dbo.Client_List WITH (NOLOCK) ORDER By Client_FName", oConn

'Now, read the Recordset into a 2d array
	Dim ClientListValues
	ClientListValues = oRS.GetRows()

oRS.Close

oRS.Open "Select DISTINCT ACC_DISP_NUMBER, ACC_DESCRIPTION FROM dbo.GL_ACCOUNTS WITH (NOLOCK) WHERE ((ACC_DISP_NUMBER >= 6550.00 AND ACC_DISP_NUMBER <= 6551.00) OR (ACC_DISP_NUMBER >= 6600.00 AND ACC_DISP_NUMBER <= 6601.00)) ORDER By ACC_DESCRIPTION", oConn

	Dim MeetingListValues
	MeetingListValues = oRS.GetRows()
	
oRS.Close
oConn.Close
Set oRS = Nothing
Set oConn = Nothing

Const MyClient_Code = 0
Const MyClient_Name = 1
Const MyClient_FName = 2
Const MyClient_City = 3
Const MyClient_State = 4

Const MyMeeting_Number = 0
Const MyMeeting_Desc = 1
%-->
	<form name="routesheet" action="" method="post">
	<table width="1000" align="center" cellpadding="2" cellspacing="0">
	<tr bgcolor="black">
	<td border="0"><font face="arial" size="2" color="white"><b>Travel & Expense Report - KFSA</b></font></td>
	<td align="right" border="0"><font face="arial" size="2" color="white"><b>Route Sheet for <%=Session("fname")%></b></font></td>
	</tr>
	</table>
	<table align="center">
	<tr>
	<td align=center><font face=Arial size=2><b>Week Ending:&nbsp;&nbsp;</b></font><input id="we" style="text-align:center; background-color:#CCCCCC" type="text" size="12" name="weekending" value="<%=ldtw%>" onchange="this.form.submit();" readonly/><img alt="popup calendar" src="Images/calendar.jpg" align="center" width="16" height="16" onclick="popUpCalendar(this, routesheet.weekending, 'mm/dd/yyyy')"/></td>
	</tr>
	</table>
	<table align="center" width="1000" cellspacing="0" cellpadding="0">
	<tr bgcolor="black" style="border: 2px solid #FFFFFF">
	<td align="center" valign="bottom" style="border-right-style: solid; border-width: 2px; border-color: #FFFFFF"><font face="Arial" size="2" color="white"><b>Date:</b></font></td>
	<td align="center" valign="bottom" style="border-right-style: solid; border-width: 2px; border-color: #FFFFFF"><font face="Arial" size="2" color="white"><b>Type:</b></font></td>
	<td align="center" valign="bottom" style="border-right-style: solid; border-width: 2px; border-color: #FFFFFF"><font face="Arial" size="2" color="white"><b>Client/Description:</b></font></td>
	<td align="center" valign="bottom" style="border-right-style: solid; border-width: 2px; border-color: #FFFFFF">
	<font face="Arial" size="2" color="white"><b>Purpose:</b></font>
	</td>
	<!--% if request.querystring("addedit")="edit" Then %-->
	<td align="center" valign="bottom" style="border-right-style: solid; border-width: 2px; border-color: #FFFFFF">
	<font face="Arial" size="2" color="white"><b>Add Mileage/Expense:</b></font>
	</td>
	<td align="center">
		<table>
		<tr>
		<td colspan="3"><font face="Arial" size="2" color="white"><b>Per Diem:</b></font></td>
		</tr>
		<tr>
		<td>
		<font face="Arial" size="2" color="white"><b>BKFST</b></font>
		<font face="Arial" size="2" color="white"><b>LUNCH</b></font>
		<font face="Arial" size="2" color="white"><b>DINNR</b></font>
		</td>
		</tr>
		</table>
	</td>
	<!--% end if %-->
	</tr>
	<!--% for i = 0 to 6 %-->
	<tbody id="day<%=i%>" class="day">
	<tr id="baseRoute<%=i%>" height="50px">
	<td width="125px" style="border-bottom:1px solid #000000">
		<table>
		<tr>
		<td><a href="" alt="Add Another Stop" onclick="addroute(0);return false;">+<img src="images/plus.png" border="0" /></a></td>
		<td style="text-align: center; width: 100px;">
		<font face="Arial" size="2" color="black"/><b><!--%=WeekdayName(Weekday(fdtw)+i)%-->Monday</b><br/><font size="1"><%=fdtw+i%></font>
		<input type="hidden" name="weekday<%=i%>" value="<%=fdtw+i%>"/>
		</td>
		</tr>
		</table>
	</td>
	<td style="border-bottom:1px solid #000000; text-align: center;">
	<select id="type<%=i%>" name="type<%=i%>" onchange="showCols(<%=i%>);">
		<option value="Select">Select Type...</option>
		<option value="Existing">Existing Client</option>
		<option value="Prospect">Prospect</option>
		<option value="Trade">Trade Show</option>
		<option value="Meeting">Meeting</option>
		<option value="Office">In Office</option>
		<option value="Leave">Leave Request</option>
	</select>
	</td>
	<td style="border-bottom:1px solid #000000; text-align: center;">
	<div id="leavediv<%=i%>" style="display:none;">
		<select name="leave<%=i%>" id="leave<%=i%>">
			<option value="">(leave)</option>
			<option value="Vacation">Vacation</option>
			<option value="Sick">Sick</option>
			<option value="PersonalLeave">Personal Leave</option>
			<option value="Birthday">Birthday</option>
			<option value="Funderal">Funeral</option>
			<option value="JurtyDuty">Jury Duty</option>
		</select>
		<script>
				var z=dhtmlXComboFromSelect("leave<%=i%>",200);
				z.enableFilteringMode(true);
				z.setOptionWidth(450);
		</script>
	</div>
	<div id="meetingdiv<%=i%>" style="display:none;">
		<select name="meeting<%=i%>" id="meeting
Member Avatar for jsvanc

Trying it out now....will let you know how it works. Thanks for all of your hard work on this.

JSV

Member Avatar for jsvanc

Airshow,

Thank you so much for the code. It is working beautifully. I have one more small thing to ask. I have alternating row colors to help differentiate the rows like this:

<% if i mod 2 = 0 then %>
		<tr id="baseRoute<%=i%>" height="30px">
		<% else %>
		<tr id="baseRoute<%=i%>" height="30px" bgcolor="#FFFFCC">
		<% end if %>

Can we put something like that in the script so that it is the same background color as the parent row. If this is just too much, then we don't need to worry about it.

And last but not least, just tell me where to send the check and I really do appreciate every thing that you have done for me.

Thank you,

JSV

Member Avatar for Airshow

JSV, there an issue in Firefox but I've got the fix. I'll wait till you come back.

Meanwhile you probably want to delete my +/- symbols at lines 204 and 312. I inserted those because of another FF problem, grrrr!

Airshow

Member Avatar for Airshow

Mmm, background colors. I'll have a go then post a new version with that and the FF fix. May be tomorrow though, depending how it goes.

Airshow

Member Avatar for jsvanc

No Problems with FF. This is an internal only website and all my users will be using IE. If they are trying to access it with FF and have problems, then I will just tell them that they have to use IE.

I did delete the +/- symbols anyway and I used just a font that says -Delete- instead of an img. Makes it look a lot cleaner. Did you get my last post about the background color?

Anyway, I am here online so feel free to post.

Thanks,

JSV

Member Avatar for Airshow

JSV,

Here's one new function and a replacement for addroute(). Together they fix FF. New code in addroute() should fix row background color, though I can't see the alternating colors in the absence of ASP to make all seven rows (you've already noticed all those asp <%=var%> fixes).

Object.prototype.getFirstChild = function(){
	if(!this.hasChildNodes) { return false; }
	var f = this.firstChild;
	while(f.nodeType !== 1){ f = f.nextSibling; }
	return (f.nodeType !== 1) ? this.firstChild : f;
}
function addroute(n){
	var proto, firstRow;
	var day = document.getElementById('day' + n);//Find the <tbody> wrapper for the day in question
	var protoContainer = document.getElementById('rowPrototype');
	if(!day || !protoContainer || !protoContainer.hasChildNodes){ return false; }
	try{ proto = protoContainer.getFirstChild().getFirstChild(); }
	catch(e){ proto = protoContainer.firstChild.firstChild; }
	var newRoute = proto.cloneNode(true);//Clone the prototype row
	try{ firstRow = day.getFirstChild(); }
	catch(e){ firstRow = day.firstChild; }
	newRoute.style.backgroundColor = firstRow.style.backgroundColor;
	day.tally = (typeof day.tally == 'undefined') ? 0 : day.tally+1;//Remember how many routes we have added
	var suffix = n + '_' + day.tally;//Compose the id/name suffix
	renumberIt(newRoute, suffix);//Add suffix to all id and name attributes in the cloned row (to make them unique)
	day.appendChild(newRoute);
	resetRow(newRoute, suffix);
	return false;//critical to suppress hyperlink action.
}

Airshow

Member Avatar for jsvanc

Airshow,

It works GREAT!!! I had to change the alternating colors a little. I was alternating with the <tr> tag and changed to using the <tbody> tag, but it doesn't matter. It works. AWESOME!!!!!!

I am serious about sending you a check or using paypal. If you want me to, you can send me a private message with your email and I will be happy to do that.

Just let me know.

Thank you sooooo much!!!!

JSV

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.