4 Replies Latest reply on Sep 8, 2009 12:19 PM by BKBK

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

    emartek1 Level 1

      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[i])&&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[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
        for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].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[i]))!=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. Re: How to create a form with optional input based on selection?
          Dan Bracuk Level 5

          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.

          • 2. Re: How to create a form with optional input based on selection?
            BKBK Adobe Community Professional & MVP

            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[i].checked && document.forms[0].Status[i].value=='Vacation'){
                      document.getElementById('startDateRow').style.visibility='visible';
                      document.getElementById('endDateRow').style.visibility='visible';
                     }
                     if (document.forms[0].Status[i].checked && !(document.forms[0].Status[i].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()">

            • 3. Re: How to create a form with optional input based on selection?
              emartek1 Level 1

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

              • 4. Re: How to create a form with optional input based on selection?
                BKBK Adobe Community Professional & MVP

                Very kind of you,  Emartek1.