Choosing From a Select Dropdown That Will Automatically Populate a TextArea

Posted on 2012-09-17
Last Modified: 2012-09-19
I am trying to set up a dropdown that list the 'Titles' of canned replies a user can choose from in a form.  Each Title has a lengthy comment and I want this comment text to populate a textarea.  This way they can slightly modify the text if need be.  All of the titles and comments are stored in the same table.

I am trying to do this in javascript but I am not sure how to get the query values into the script.

Here is what I have so far:

<CFQUERY NAME="GetResponseDropdown" DATASOURCE="#variables.DSN#" username="#variables.UN#" password="#variables.PW#"
    SELECT response_comment_id, response_comment, RESPONSE_COMMENT_TITLE
    from response_comments
    where agencyid = '<cfoutput>#variables.snlset_LOG_AGENCYID#</cfoutput>'
    order by response_comment

<script type="text/javascript">  
var dropdown = document.getElementById('commentDropDown');
var textbox = document.getElementById('commentText');    
var comment  
dropdown.onchange = function(){                    
      textbox.innerHTML = commentDropDown.value;
<br />
<br />

<select id="commentDropDown">    

<option value="nothing">Nothing
<cfloop QUERY="GetResponseDropdown">
    <option value="#GetResponseDropdown.Response_Comment#">
<br />
<br />

<cfoutput><textarea id="commentText"></textarea></cfoutput>

Attached are example values for RESPONSE_COMMENT_TITLE and RESPONSE_COMMENT.

Any help will be greatly appreciated.

Question by:madrum
    LVL 58

    Expert Comment

    I would think storing the 'response' in the dropdown value would be impractical (speech marks etc) but how about storing an id linking to a div - id being maybe the id of the record in the database preprended with canned. The div would obviously be hidden
    That way on change of the dropdown use javascript to get the innerHTML of the div based on this canned_id and place that in the textarea.
    LVL 51

    Accepted Solution

    You can store it as part of the list (see below), just make sure to escape the value. But .. as GaryC123 it's possible you'll still run afoul of certain reserved characters.  So hidden div's are one option. Another is using a bind. ]see here for an example

    <script type="text/javascript">
    	function nameSelected(list) {
    		var text = list.options[list.selectedIndex].getAttribute("comment");
    		document.getElementById('commentText').value = text;
    <select id="commentDropDown" onChange="nameSelected(this)"> 
    <option value="nothing">Nothing</option>
    <cfoutput query="GetResponseDropdown">
        <option value="#RESPONSE_COMMENT_ID#" comment="#HTMLEditFormat(GetResponseDropdown.Response_Comment)#">
    <textarea id="commentText"></textarea>

    Open in new window


    Author Closing Comment

    Thank you!  Thank you!  Thank you!  I have been looking all day to no avail trying to find code that my gut feeling kept telling me, would be simply.  Not having had a whole lot of experience with javascript and especially not having coded for a while, this is exactly what I was looking for.  Of all the examples I have seen today, none where so sweet and simple.

    LVL 51

    Expert Comment

    You are very welcome :)

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    IT, Stop Being Called Into Every Meeting

    Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

    Sometimes databases have MILLIONS of records and we need a way to quickly query that table to return the results me need. Sure you could use CFQUERY but it takes too long when there are millions of records. That is why SOLR was invented. Please …
    Active Directory replication delay is the cause to many problems.  Here is a super easy script to force Active Directory replication to all sites with by using an elevated PowerShell command prompt, and a tool to verify your changes.
    The viewer will learn how to count occurrences of each item in an array.
    In this fifth video of the Xpdf series, we discuss and demonstrate the PDFdetach utility, which is able to list and, more importantly, extract attachments that are embedded in PDF files. It does this via a command line interface, making it suitable …

    737 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

    19 Experts available now in Live!

    Get 1:1 Help Now