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

[Libby_H]

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!

[jbreslow]

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>

[WolfShade · Accepted solution]

Unless you are using a latest version of CF (I believe 7 or 8 through 9), in which case if the form is a CFFORM, and the select is a CFSELECT, and the fields are CFINPUT, you can use BIND="" in the CFINPUTs to detect the @change of the CFSELECT and populate accordingly.

^_^

PS:  I love JavaScript, I'm a JScriptin' fool, sometimes.. but if this can be handled by CF, why not?  (shrug)

[Libby_H]

I certainly can give it a try.  A co-worker coded it strickly with the html form/table/select works, but I can re-code and try again.  We are on enterprise 9 Windows 2003 R2SP2 with SQL Server 2000.

Will investigate and post my findings.  Thanks.

Libby H.

[Libby_H]

I followed your suggestion - I changed the form to a cfform, the input to a cfinput and the select to a cfselect.  On the cfinput where I wanted to put the updated field, I put the bind statement: <cfinput type="Text" name="subject"  required="Yes" size="70" maxlength="70"  bind="{approval_type.text}">

This 'exercise' was to create an E-Mail heading, so my bind statement changed to:

<cfinput type="Text" name="subject"  required="Yes" size="70" maxlength="70"  bind="#RequestId# {approval_type.text}  Approval Request">

Whenselected, I get  "1106-0001 UAT Approval Request"  Just what I wanted!!

My only problem now is that the bind statement only triggers only when an entry other than the first one is selected.  It won't load/take the first record from the query (unless you select another one, click out, then back in).  So if the user decides they want the first record from the query, nothing happens, even if they click on the dropdown and select the record.  So very close.  Any ideas?

[WolfShade]

<cfinput type="Text" name="subject"  required="Yes" size="70"  maxlength="70"  bind="#RequestId# {approval_type.text}  Approval  Request"

     bindonload="yes">

[Libby_H]

AWESOME!!!!

That did the trick.  Thank you for all of your help.

Libby H.