Use Coldfusion in Javascript to populate a Select Dropdown

Posted on 2006-07-03
Last Modified: 2013-12-24

I have a dropdown select which submit to a hidden Iframe and pass the value back to the Javascript function 'handleResponse' below.  In this function I want to populate another dropdown select based on the value passed from the hidden Iframe.

I've tried to use Coldfusion in the javascript to populate the dropdown but I struggle to make it work.  Can you please tell me what I am doing wrong here.  Please see the script below.  Thank you in advance.

function handleResponse(currVal) {

<cfset atime = StructNew()>
<cfset a = StructInsert(atime, 1,  "9:30 AM", 1)>
<cfset a = StructInsert(atime, 2,  "10:00 AM", 1)>
<cfset a = StructInsert(atime, 3,  "10:30 AM", 1)>
<cfset a = StructInsert(atime, 4,  "11:00 AM", 1)>
<cfset a = StructInsert(atime, 5,  "11:30 AM", 1)>
<cfset a = StructInsert(atime, 6,  "12:00 PM", 1)>
<cfset a = StructInsert(atime, 7,  "12:30 PM", 1)>
<cfset a = StructInsert(atime, 8,  "1:00 PM", 1)>
<cfset a = StructInsert(atime, 9,  "1:30 PM", 1)>
<cfset a = StructInsert(atime, 10, "2:00 PM", 1)>
<cfset a = StructInsert(atime, 11, "2:30 PM", 1)>
<cfset a = StructInsert(atime, 12, "3:00 PM", 1)>
<cfset a = StructInsert(atime, 13, "3:30 PM", 1)>
<cfset a = StructInsert(atime, 14, "4:00 PM", 1)>
<cfset a = StructInsert(atime, 15, "4:30 PM", 1)>
<cfset a = StructInsert(atime, 16, "5:00 PM", 1)>
<cfset a = StructInsert(atime, 17, "5:30 PM", 1)>
<cfset a = StructInsert(atime, 18, "6:00 PM", 1)>
<cfset a = StructInsert(atime, 19, "6:30 PM", 1)>
<cfset a = StructInsert(atime, 20, "7:00 PM", 1)>

<cfset timelist = arrayToList(structSort(atime, "numeric"))>

<cfloop list='#timelist#' index='num'>
   <cfset dropdown  = "<option value='#num#'>#atime[num]#</option>">

if (currVal == 'all') {

   <!---alert("<cfloop list='#timelist#' index='num'><cfoutput>#atime[num]#</cfoutput></cfloop>")--->

  document.apptform.available_time.options.length = 0
  for(i=0;i<<cfoutput>#listlen(timelist)#</cfoutput>;i++) {

        document.apptform.available_time.options[i] = new Option(<cfoutput>#atime[i]#</cfoutput>)
        //document.write('<option value=' + i + '>' + i + '</option>');

} else {
Question by:valleytech
  • 3
  • 2

Expert Comment

ID: 17039370
The way this code is put together looks like you are trying to mix processing logic between Javascript (client-side code) and Coldfusion (Server-side code). This will not work.

Its important to keep in mind where the code is going to be running to make this work.

Is the above code on the page that is inside the iframe, or is this in the main document?

How is the function handleResponse() called?

Author Comment

ID: 17040442
The above code is in the main document.  What happens here is in the main document I have a hidden Iframe:

<iframe id="RSIFrame" name="RSIFrame" style="width:0px; height:0px; border: 0px" src="blank.html"></iframe>

I also have a select dropdown like this:

<select name="select_employee" id="select_employee" disabled=true
   onchange="loadIframe('RSIFrame', this.options[this.selectedIndex].value);
   <option value="">[Select]</option>
  <option value="all">All</option>
<cfoutput query="GetEmployees">
  <option value= "#GetEmployees.NICK_NAME#">#GetEmployees.NICK_NAME#</option>

Here's the Javascript loadIframe function:

function loadIframe(iframeName, url) {
  if ( window.frames[iframeName] ) {
    window.frames[iframeName].location = 'misc/availableTime.cfm?timeVal='+url;
    return false;
  } else return true;

This function execute & pass 'timeVal' variable to availableTime.cfm.  Here's availableTime.cfm:

<cfparam name="URL.select_employee" default="">

<cfif isdefined("URL.timeVal")>      
  <cfset time = '#URL.timeVal#'>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">




availableTime.cfm pass the variable back to the main document through 'handleResponse' function.  As you saw in the Javascript 'handleResponse' function in the main document, I tried to populate another select dropdown by the values of the 'atime' structure; however I can only populate the select dropdown by the keys of the structure.  I remember reading somewhere it said that Coldfusion code can be put in Javascript just like HTML.  Here if I put like this

document.apptform.available_time.options[i] = new Option(<cfoutput>#atime[i]#</cfoutput>)

it gives me error.  

Thank you bwasyliuk.


Author Comment

ID: 17040467

Accepted Solution

bwasyliuk earned 125 total points
ID: 17043589
It seems to be that you could do away with the iframe based on what it is doing now - but if you are needing the iframe to process some cfquery(or other CF) tags based on the time selection, then I think you can make this work.

If you want to loop through the struct you have created and output the js, you can do something like:

<cfloop index = "curr_key" from = "1" to = "#StructCount(atime)#">
<cfoutput>document.apptform.available_time.options[#curr_key-1#] = new Option(#atime[curr_key]#);</cfoutput>

this would replace the following set of code in your original example:
for(i=0;i<<cfoutput>#listlen(timelist)#</cfoutput>;i++) {

        document.apptform.available_time.options[i] = new Option(<cfoutput>#atime[i]#</cfoutput>)
        //document.write('<option value=' + i + '>' + i + '</option>');

Author Comment

ID: 17046254
Thank you bwasyliuk.  That solves my problem :).

Featured Post

What is SQL Server and how does it work?

The purpose of this paper is to provide you background on SQL Server. It’s your self-study guide for learning fundamentals. It includes both the history of SQL and its technical basics. Concepts and definitions will form the solid foundation of your future DBA expertise.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
WSUS Client Issues 52 1,280
Configure IIS to process JSON 10 74
spamming  on Hosted svrs? 6 74
Windows Tool to Build Android and iOS App 3 54
In this short web based tutorial, I wanted to show users how they can still use the powers of FrontPage in conjunction with Expression Web 3.  Even though Microsoft eliminated the use of Web components, we can still use them with FrontPage and edit …
This article provides a case study on how our local youth baseball league deployed a new website, including the platform selection, implementation and benefits to the league.
The purpose of this video is to demonstrate how to properly insert a Vimeo Video into a WordPress site or Blog. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following:…
The purpose of this video is to demonstrate how to integrate Mailchimp with WordPress, by placing a Mailchimp signup form on a WordPress Page or Post. This will be demonstrated using a Windows 8 PC. Mailchimp will be used. Log into your Mailchi…

920 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now