Select/option with cfquery - how to pass selected value to field downform

Question

I have a form that has a basic select/option dropdown using a cfquery result.  I would like to use the value that the user selects to pre-populate an editable 'title' field further along on the form.  For example:
<form action="index.cfm?fuseaction=sendEmail" method="POST" name="email_approval" enctype="multipart/form-data">
<table width="500" border="1" cellspacing="0" cellpadding="2" align="center">
<tr>
  <td align="left">Request ID:</td>
  <td align="left" width="100"><b><cfoutput>#RequestId#</cfoutput></b></td>
  <td align="left">Application:</td>
  <td align="left" width="400"><b><cfoutput>#this_request.app_abbrev#</cfoutput></b></td>
  <td align="left">WR/RD#:</td>
  <td align="left" width="400"><b><cfoutput>#this_request.request_number#</cfoutput></b></td>
</tr>
<tr>
  <td align="left">Email Type:</td>
  <td align="left" colspan="2">
      <select name="approval_type" size="1" >
      <cfoutput query="approval_types">
         <option value="#approval_types.approval_descrip#" style="font-size:8pt">#approval_types.approval_descrip#</option>
       </cfoutput>
     </select>
  </td>
  <td align="left"> </td>
  <td align="left">Date Sent:</td>
  <td align="left"><b><cfoutput>#dateformat(Now(), "MM/DD/YYYY")#</cfoutput></b></td>
</tr>
  <cfset subjectLine = "#RequestId#" & " " & "#approval_types.approval_descrip#" & " Approval Request" >
<script  type="text/javascript" language="JavaScript">
<cfoutput>
  var #toScript(subjectLine, "jsLine")#;
</cfoutput>
</script>
<script  type="text/javascript" language="JavaScript">
function setValue()
  document.getElementById('subject').value =jsLine;
</script>
<tr>
  <td align="left">Subject:</td>
  <td align="left" colspan="5">
   <b><input type="Text" name="subject"  required="Yes" size="70" maxlength="70" onClick="setValue();"></b>
</td>
</tr>
When the user gets to the subject field,the onClick will pre-populate the field with the combined value using <cfset subjectLine = "#RequestId#" & " " & "#approval_types.approval_descrip#" & " Approval Request" >.  regardless of what is selected, it uses the first item in the query list because that is what is rendered when the form is loaded (got that).  I figure that I need a javascript onChange event for the select statement for the dropdown, but can't figure out how to pass this javascript variable back to the CF form.  Any ideas, or am I stuck?
Thanks in advance for your thoughts!

Answer 1

You will need to do it with JS as the values you want to access are not set until the form is submitted. This should give you what you want.
It uses a hidden form field to hold the requestID, that is then accessed with JS. (I am assuming this value is available when the page loads)
<form action="index.cfm?fuseaction=sendEmail" method="POST" name="email_approval" enctype="multipart/form-data">
<input type="hidden" name="requestID" id="reqID" value="1234" />
<table width="500" border="1" cellspacing="0" cellpadding="2" align="center">
<tr>
  <td align="left">Email Type:</td>
  <td align="left" colspan="2">
      <select name="approval_type" id="approval_type" size="1" >
         <option value="test" style="font-size:8pt">test</option>
     </select>
  </td>
  <td align="left"> </td>
  <td align="left">Date Sent:</td>
  <td align="left"><b><cfoutput>#dateformat(Now(), "MM/DD/YYYY")#</cfoutput></b></td>
</tr>
<script  type="text/javascript" language="JavaScript">
function setValue(){
    var e = document.getElementById("approval_type");
    var approval_type_value = e.options[e.selectedIndex].value;
    var subjectLine = document.getElementById('reqID').value + ' ' + approval_type_value + ' Approval Request';
    document.getElementById("subject").value = subjectLine;
    alert(subjectLine); 
</script> 
<tr>
  <td align="left">Subject:</td>
  <td align="left" colspan="5">
   <b><input type="Text" name="subject"  required="Yes" size="70" maxlength="70" onClick="setValue();"></b>
</td>
</tr>