title: Including an AJAX-retrieved select input in an HTML form with ColdFusion
body: <p>I have AJAX that loads a drop-down menu of teams within a selected department, and then another with agents within that selected team. I'd like to be able to submit the form and use the agent selected in the last dropdown (#form.selectAgent#) to set a variable (#empHistoryRACF#) &amp; run a query. I am able to see both of the dropdowns with AJAX-queried content as I fill out the form, but their values are not being submitted on post, although the submit button (non-AJAXed) is. Oddly, there is another section of my app that does the same thing with the same type of code, and it works fine. I tried commenting that section of the app out, but form.selectAgent is still not defined. I'm using ColdFusion 10 and the following code.</p>
  
  <p>The HTML form:</p>
  
  <pre><code>&lt;form action="index.cfm" method="post" name="empHist"&gt;
  &lt;td colspan="5"&gt;
      &lt;h2&gt;Employee History (#empHistoryRACF#)&lt;/h2&gt;
  &lt;/td&gt;
  &lt;td colspan="2" style="text-align: center;"&gt;
      &lt;select name="employeeHistory" id="empHist" onchange="getTeamsHist(this.value)"&gt;
          &lt;option value=""&gt;&lt;/option&gt;
          &lt;cfset length = structCount(deptStruct)&gt;
          &lt;cfloop from="1" to="#length#" index="i"&gt;
              &lt;option value="#deptStruct[i]['DEPT_NAME']#"&gt;#deptStruct[i]['DEPT_NAME']#&lt;/option&gt;
          &lt;/cfloop&gt;
      &lt;/select&gt;
  &lt;/td&gt;
  &lt;td style="text-align: center;"&gt;
      &lt;div id="getTeamsHist"&gt;&lt;/div&gt;
  &lt;/td&gt;
  &lt;td style="text-align: center;"&gt;
      &lt;div id="getAgentsHist"&gt;&lt;/div&gt;
  &lt;/td&gt;
  &lt;td style="text-align: right;"&gt;
      &lt;input type="submit" name="submitHist" value="View Employee"&gt;
  &lt;/td&gt;           
  &lt;/form&gt;
  </code></pre>
  
  <p>The AJAX for getTeamsHist and getAgentsHist:</p>
  
  <pre><code>function getTeamsHist(str) {
      var xmlhttp;
  
      if (str == "") {
          document.getElementById("getTeamsHist").innerHTML = "";
          return;
      }
  
      if (window.XMLHttpRequest) {
          // code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp=new XMLHttpRequest();
      } else {// code for IE6, IE5
          xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
  
      xmlhttp.onreadystatechange = function() {
          if (xmlhttp.readyState==4 &amp;&amp; xmlhttp.status==200) {
              document.getElementById("getTeamsHist").innerHTML = xmlhttp.responseText;
          }
      }
  
      xmlhttp.open("GET","ajax/get_teams_hist.cfm?ajaxDept=" + str, true);
      xmlhttp.send();
  }
  
  function getAgentsHist(str) {
      var xmlhttp;
  
      if (str == "") {
          document.getElementById("getAgentsHist").innerHTML = "";
          return;
      }
  
      if (window.XMLHttpRequest) {
          // code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp=new XMLHttpRequest();
      } else {// code for IE6, IE5
          xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
  
      xmlhttp.onreadystatechange = function() {
          if (xmlhttp.readyState==4 &amp;&amp; xmlhttp.status==200) {
              document.getElementById("getAgentsHist").innerHTML = xmlhttp.responseText;
          }
      }
  
      xmlhttp.open("GET","ajax/get_agents_hist.cfm?ajaxTeam=" + str, true);
      xmlhttp.send();
  }
  </code></pre>
  
  <p>Here is get_teams_hist.cfm:</p>
  
  <pre><code>&lt;cfoutput&gt;
  &lt;cfloop query="agentQuery"&gt;
      &lt;cfloop list="#agentQuery.columnList#" index="col"&gt;
          &lt;cfset agentStruct[currentRow]['#col#'] = evaluate(#col#)&gt;
      &lt;/cfloop&gt;
  &lt;/cfloop&gt;
  
  &lt;select name="selectAgent" id="selectAgent"&gt;
      &lt;option value=""&gt;&lt;/option&gt;
      &lt;cfset length = structCount(agentStruct)&gt;
      &lt;cfloop from="1" to="#length#" index="i"&gt;
          &lt;option value="#agentStruct[i]['AGENT_UID']#"&gt;#agentStruct[i]['AGENT_UID']#&lt;/option&gt;
      &lt;/cfloop&gt;
  &lt;/select&gt;
  &lt;/cfoutput&gt;
  </code></pre>
  
  <p>And here's get_agents_hist.cfm:</p>
  
  <pre><code>&lt;cfoutput&gt;
  &lt;cfloop query="teamQuery"&gt;
      &lt;cfloop list="#teamQuery.columnList#" index="col"&gt;
          &lt;cfset teamStruct[currentRow]['#col#'] = evaluate(#col#)&gt;
      &lt;/cfloop&gt;
  &lt;/cfloop&gt;
  
  &lt;select name="selectTeam" id="selectTeam" onchange="getAgentsHist(this.value)"&gt;
      &lt;option value=""&gt;&lt;/option&gt;
      &lt;cfset length = structCount(teamStruct)&gt;
      &lt;cfloop from="1" to="#length#" index="i"&gt;
          &lt;option value="#teamStruct[i]['AGENT_TEAM']#"&gt;#teamStruct[i]['AGENT_TEAM']#&lt;/option&gt;
      &lt;/cfloop&gt;
  &lt;/select&gt;
  &lt;/cfoutput&gt;
  </code></pre>
  
  <p>And this is how I'm trying to use the content from the second select - it's showing that selectAgent is undefined. It is also not showing if I do cfdump var="#form#".</p>
  
  <pre><code>&lt;cfif isDefined('form.submitHist')&gt;
      &lt;cfset empHistoryRACF = form.selectAgent&gt;
  &lt;cfelse&gt;
      &lt;cfset empHistoryRACF = ""&gt;
  &lt;/cfif&gt;
  </code></pre>