1 Reply Latest reply: Aug 26, 2014 4:05 AM by BKBK RSS

    Change form field values based on selection?

    straffenp Community Member

      Hi all,

       

      I am working on a calendar scheduling function for a school that I'm having a hard time wrapping my brain around.  My DB table has 3 columns - ApptDate, ApptTime, ApptSlots.  Most ApptDates are listed more than once because there is more than one time available for a date.  See below for example:

       

      ApptDateApptTimeApptSlots
      9/9/20143:00 PM2
      9/9/20143:30 PM2
      9/9/20144:00 PM2

       

      The page queries this table for all data.  Then, there is a query of that query that selects distinct dates and outputs them in a drop down--the first step in a user choosing their appointment.  The next form field I'll have is a drop down for times.  What I'd like to happen is based on the user's date selection, the corresponding times will appear in the time drop down, as long as ApptSlots gt 0.  Before the user selects a date, I'd like the time drop down to be hidden or disabled.

       

      Is this a possibility or am I dreaming?

       

      Thanks for the help!

        • 1. Re: Change form field values based on selection?
          BKBK CommunityMVP

          Great explanation. Your explanation is straightforward, so just proceed and code it as you say it. No complications, not even AJAX, nothing. Wrapping your brain around it is what makes it appear more difficult than it is.

           

          I will give you a few tips to get you started. First of all, what you call a database table isn't actually one. Add an extra column to the table, a primary key. For example, apptID, of integer type, 1, 2, 3, ..., etc., giving each appointment a unique ID.

           

          Then continue as follows:

           

          <cfif isDefined("form.dateField")><!--- If user has selected a date, then store it so that it is available in his session --->

              <cfset session.selectedDate = form.dateField>

          <cfelse>

              <cfset session.selectedDate = "">

          </cfif>

           

          <cfif NOT isDefined("application.getDates")> <!--- No dates are available --->

              <cfquery name="application.getDates"><!--- Get distinct dates and store them in application scope --->

              /* select distinct apptDate as availableDate */

              </cfquery>

          <cfelse>   <!--- Dates are available --->

              <cfoutput>

              <form action="#CGI.SCRIPT_NAME#" method="post" name="f1" id="f1">

              <select name="dateField">

                  <option value="">Select Appointment Date<option>

                 <cfloop query="#application.getDates#"><!--- List dates as dropdown options--->

                     <option value="#availableDate#" <cfif session.selectedDate EQ availableDate>selected</cfif>>#availableDate#<option>

                 </cfloop>

              </select>

              <br>

              <input name="sbmt1" type="submit" value="Submit appointment date">

              </cfform>

              </cfoutput>

          </cfif>

           

          <cfif session.selectedDate IS NOT "">

              <cfquery name="session.getTimes">

              /* select apptTime as availableTime where apptDate = '#session.selectedDate#' */

              </cfquery>

           

              <form action="#CGI.SCRIPT_NAME#" method="post" name="f2" id="f2">

              <select name="timeField">

                  <option value="">Select Appointment Time<option>

                 <cfloop query="#application.getTimes#"><!--- List times as dropdown options--->

                     <option value="#availableTime#">#availableTime#<option>

                 </cfloop>

              </select>

              <br>

              <input name="sbmt2" type="submit" value="Submit time of appointment">

              </cfform>

              </cfoutput>

          </cfif>