How to make drop down list display message without form submit

Question

I need to have my drop down list be able to show it's corresponding message in plain text upon selection without having to do a form submit. I don't know how to do it in JavaScript or other more fancy technologies. I'm a newbie in ColdFusion. Will someone be willing to send me a simple code example? Thank you for helping.

I have the following drop down (actually I'm using cfselect but my code won't show up in this forum so I'm writing it in select instead of cfselect )

<select name="MySchedule" class="Req">  
   <cfloop query="MySchedules">             
    <option value="#ScheduleId#">Schedule #xSequence#</option>
   </cfloop>            
</select>


<!--- the corresponding message should show up here as a plain text --->
<cfoutput query="MySchedules>
   #DateFrom# - #DateTo#<br>
   #ScheduleLocation#
</cfoutput>

Answer 1

ColdFusion runs on the server side while javascript runs on the client side. In other words, to use ColdFusion you would need to send some information to the server. You could do this via AJAX in an iframe (easier than it sounds), but some submission still needs to occur.

I would approach this from a pure JS route instead:

<select id="MySchedule" name="MySchedule" class="Req" onChange="MyScheduleChange();">
    <cfoutput query="MySchedules">             
        <option value="#ScheduleId#">Schedule #xSequence#</option>
    </cfoutput>            
</select>

<div id="MyScheduleMessage"></div>

<script>
    var messageArr  = new Array();

    <cfoutput query="MySchedules">
        messageArr[#currentRow-1#]  = new Array();
        messageArr[#currentRow-1#][1]   = "#ScheduleId#";
        messageArr[#currentRow-1#][2]   = "#DateFrom# - #DateTo#<br>#ScheduleLocation#";
    </cfoutput>

    function MyScheduleChange() {
        var selVal  = document.getElementById('MySchedule').value;
        for (x=0; x<messageArr.length; x++) {
            if (messageArr[x][1] == selVal) {
                document.getElementById('MyScheduleMessage').innerHTML = messageArr[x][2];
            }
        }
    }
</script>

I tested this code using the following query at the top of the page:

<cfquery datasource="#ds#" name="MySchedules">
    SELECT  '1'         AS ScheduleID,
            '01'        AS xSequence,
            '1/1/2000'  AS DateFrom,
            '5/31/2000' AS DateTo,
            'PIT'       AS ScheduleLocation

    UNION

    SELECT  '2'         AS ScheduleID,
            '02'        AS xSequence,
            '3/1/2000'  AS DateFrom,
            '4/31/2000' AS DateTo,
            'NYC'       AS ScheduleLocation
</cfquery>

I provided the clean code above so as to avoid it being overwhelming, since you said you were a novice. Here is a version of the code that has comments to help you understand how the above works:

<select id="MySchedule" name="MySchedule" class="Req" onChange="MyScheduleChange();">
    <!--- You probably should add a default blank option here --->
    <cfoutput query="MySchedules">             
        <option value="#ScheduleId#">Schedule #xSequence#</option>
    </cfoutput>            
</select>

<div id="MyScheduleMessage"></div>

<script>
    var messageArr  = new Array(); // This javascript array will hold the data from our query.

    <cfoutput query="MySchedules">
        // Javascript doesn't really do 2 dimensional arrays intuitively.  Below we create an array within the array.  It's like a ColdFusion 2 dimensional array.
        // Note the array index is #currentRow-1#.  That's because ColdFusion starts counting at 1, but Javascript starts counting at 0.
        messageArr[#currentRow-1#]      = new Array();
        messageArr[#currentRow-1#][1]   = "#ScheduleId#"; // This holds the schedule ID so we can find the correct row later.
        messageArr[#currentRow-1#][2]   = "#DateFrom# - #DateTo#<br>#ScheduleLocation#"; // This holds all the information that we plan to display
    </cfoutput>

    // The below function is called any time the user changes the select box value.
    function MyScheduleChange() {
        var selVal  = document.getElementById('MySchedule').value; // This gets the select box value and stores it in a variable so it's easier to use below.
        for (x=0; x<messageArr.length; x++) { // Here we loop over every row in the array
            if (messageArr[x][1] == selVal) { // Then we check to see if the scheduleID of this row matches the scheduleID the user selected.
                document.getElementById('MyScheduleMessage').innerHTML = messageArr[x][2]; // If so, we set the contents of the div to the info you wanted to display.
            }
        }
    }
</script>