• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

How to create a form with optional input based on selection?

Guest
Sep 06, 2009 Sep 06, 2009

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)&&d.all) x=d.all; for (i=0;!x&&i<d.forms.length;i++) x=d.forms;
  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>

TOPICS
Advanced techniques

Views

692

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Sep 07, 2009 Sep 07, 2009

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

...

Votes

Translate

Translate
LEGEND ,
Sep 07, 2009 Sep 07, 2009

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 07, 2009 Sep 07, 2009

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()">

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Sep 07, 2009 Sep 07, 2009

Copy link to clipboard

Copied

Thanks BKBK...you're 2 for 2!! I really appreciate the help!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 08, 2009 Sep 08, 2009

Copy link to clipboard

Copied

LATEST

Very kind of you,  Emartek1.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Resources
Documentation