Copy link to clipboard
Copied
The form shown below allows users to log in and update their status by selecting a corresponding radio button. Ideally I would like to have the form display the vacation start and end dates only if the vacation radio button is selected. Is there any way to do this, perhaps with a cfif statement? Any help would be greatly appreciated. Also, the dates are not saving when the form is executed and I can't figure out why...this is the first time I have used an input calendar and am obviously not coding this correctly. PLEASE HELP!!!!
<cfinclude template="mp_ck_auth1.cfm">
<cfquery name="CheckUser" datasource="dbase_one">
SELECT *
FROM Users
WHERE UserID = #Session.UserID#
</cfquery>
<cfoutput query="CheckUser">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<style type="text/css">
<!--
.style1 {
font-family: "Arial Black";
font-size: 18px;
font-weight: bold;
}
.style2 {font-size: 24px}
.style7 {font-size: 18px; font-family: Tahoma; }
.style8 {font-family: Tahoma}
-->
</style>
<style type="text/css">
<!--
body {
background-image: url();
background-repeat: no-repeat;
margin-left: 0px;
margin-top: 0px;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
.style12 {font-size: 12}
.style15 {
font-size: 14px;
font-weight: bold;
}
.style16 {font-size: 12px}
-->
</style>
<html>
<head>
<script type="text/javascript" src="calendarDateInput.js">
</script>
<script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body onload="MM_preloadImages('whats_new.jpg','promos.jpg','dayes.jpg')">
<<table border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3"><div align="center" class="style2 style1">TERRiTORY MANAGER STATUS </div></td>
</tr>
<tr>
<td colspan="3"><div align="center" class="style2 style3">
<p class="style7">Welcome back #UserFirstName# #UserLastName#! </p>
<cfform method="post" action="log_entry.cfm"><cfoutput>
<input type="hidden" name="LogDate" value="#DateFormat(Now(), "mm/dd/yyyy")#"></cfoutput>
<table width="525" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="177" align="left"><span class="style8 style15">Territory Manager: </span></td>
<td width="363" height="16" align="left"><span class="style12">
<label>
<input name="TerritoryManager" type="text" id="TerritoryManager" value="#UserFirstName# #UserLastName#" />
</label>
</span></td>
</tr>
<tr>
<td align="left" bgcolor="##CCCCCC"><span class="style8 style15">Status:</span></td>
<td height="20" bgcolor="##CCCCCC"><span class="style12">
<label></label>
</span></td>
</tr>
<tr>
<td align="left"><span class="style8 style16"><strong>
<input name="Status" type="radio" value="In the Field" />
In the Field </strong></span></td>
<td><span class="style12">
<label></label>
</span></td>
</tr>
<tr>
<td align="left" bgcolor="##CCCCCC"><span class="style8 style16"><strong>
<input name="Status" type="radio" value="Vacation" />
Vacation</strong></span></td>
<td bgcolor="##CCCCCC"> </td>
</tr>
<tr>
<td align="left"><blockquote>
<p><span class="style16 style8"><strong>Start date:
</strong></span></p>
</blockquote> </td>
<td align="left"><script>DateInput('VacStart', true, 'DD-MON-YYYY')</script></td>
</tr>
<tr>
<td align="left"><blockquote>
<p><span class="style16 style8"><strong>End date:
</strong></span></p>
</blockquote> </td>
<td align="left"><script>DateInput('VacEnd', true, 'DD-MON-YYYY')</script></td>
</tr>
<tr>
<td align="left"><span class="style8 style16"><strong>
<label>
<input name="Status" type="radio" value="Sick day" />
</label>
Sick Day </strong></span></td>
<td> </td>
</tr>
<tr>
<td align="left"><span class="style8 style16"><strong>
<label>
<input name="Status" type="radio" value="Admin Day" />
</label>
Admin Day </strong></span></td>
<td> </td>
</tr>
<tr>
<td align="left"><span class="style8 style16"><strong>
<input name="Status" type="radio" value="DSR Ride Along" />
DSR Ride Along </strong></span></td>
<td align="left"><label>
<input name="DSRName" type="text" id="DSRName" />
</label></td>
</tr>
<tr>
<td align="left"><span class="style8 style16"><strong>
<label>
<input name="Status" type="radio" value="ServiceCall" />
</label>
Service Calls </strong></span></td>
<td align="left"><label>
<input type="text" name="ServiceName" />
</label></td>
</tr>
<tr>
<td align="left"> </td>
<td align="left"> </td>
</tr>
<tr>
<td colspan="2" align="center"><label>
<input type="submit" value="Submit" />
</label>
<label>
<input type="reset" value="Reset" />
</label></td>
</tr>
</table>
</cfform>
</body>
</html></cfoutput>
1) Copy this script to the code
<script type="text/javascript">
function displayVacationDates() {
for (var i=0; i < document.forms[0].Status.length; i++) {
if (document.forms[0].Status.checked && document.forms[0].Status.value=='Vacation'){
document.getElementById('startDateRow').style.visibility='visible';
document.getElementById('endDateRow').style.visibility='visible';
}
if (document.forms[0].Status.checked && !(document.forms[0].Status.value=='Va
Copy link to clipboard
Copied
You don't use cfif to control what happens on the client. You use javascript for html forms and actionscript for flash forms.
Google "javascrip hide element" for some code samples.
Copy link to clipboard
Copied
1) Copy this script to the code
<script type="text/javascript">
function displayVacationDates() {
for (var i=0; i < document.forms[0].Status.length; i++) {
if (document.forms[0].Status.checked && document.forms[0].Status.value=='Vacation'){
document.getElementById('startDateRow').style.visibility='visible';
document.getElementById('endDateRow').style.visibility='visible';
}
if (document.forms[0].Status.checked && !(document.forms[0].Status.value=='Vacation')){
document.getElementById('startDateRow').style.visibility='hidden';
document.getElementById('endDateRow').style.visibility='hidden';
}
}
}
</script>
2) Set initial style to 'hidden'
<tr id="startDateRow" style="visibility:hidden">
<td align="left"><blockquote>
<p><span class="style16 style8"><strong>Start date:
</strong></span></p>
</blockquote> </td>
<td align="left"><script>DateInput('VacStart', true, 'DD-MON-YYYY')</script></td>
</tr>
<tr id="endDateRow" style="visibility:hidden">
<td align="left"><blockquote>
<p><span class="style16 style8"><strong>End date:
</strong></span></p>
</blockquote> </td>
<td align="left"><script>DateInput('VacEnd', true, 'DD-MON-YYYY')</script></td>
</tr>
3) Call the display script
<input name="Status" type="radio" value="In the Field" onclick="displayVacationDates()">
<input name="Status" type="radio" value="Vacation" onclick="displayVacationDates()">
<input name="Status" type="radio" value="Sick day" onclick="displayVacationDates()">
<input name="Status" type="radio" value="Admin Day" onclick="displayVacationDates()">
<input name="Status" type="radio" value="DSR Ride Along" onclick="displayVacationDates()">
<input name="Status" type="radio" value="ServiceCall" onclick="displayVacationDates()">
Copy link to clipboard
Copied
Thanks BKBK...you're 2 for 2!! I really appreciate the help!
Copy link to clipboard
Copied
Very kind of you, Emartek1.