Choosing From a Select Dropdown That Will Automatically Populate a TextArea

Posted on 2012-09-17
Medium Priority
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
  • 2
LVL 58

Expert Comment

ID: 38407847
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 52

Accepted Solution

_agx_ earned 2000 total points
ID: 38407979
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

ID: 38407995
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 52

Expert Comment

ID: 38414888
You are very welcome :)

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…
Suggested Courses
Course of the Month16 days, 14 hours left to enroll

862 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