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
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Efficient way to get backups off site to Azure

This user guide provides instructions on how to deploy and configure both a StoneFly Scale Out NAS Enterprise Cloud Drive virtual machine and Veeam Cloud Connect in the Microsoft Azure Cloud.

Question has a verified solution.

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

Suggested Solutions

Periodically we have to update or add SSL certificates for customers. Depending upon your hosting plan you may be responsible for the installation and/or key generation. In the wake of Heartbleed many sites were forced to re-key. We will concen…
Introduction This article explores the design of a cache system that can improve the performance of a web site or web application.  The assumption is that the web site has many more “read” operations than “write” operations (this is commonly the ca…
The purpose of this video is to demonstrate how to Import and export files in WordPress. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: : Click on Too…
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…

734 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