Choosing From a Select Dropdown That Will Automatically Populate a TextArea

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:

<!---- GET RESPONSE DROPDOWN LIST ---->
<CFQUERY NAME="GetResponseDropdown" DATASOURCE="#variables.DSN#" username="#variables.UN#" password="#variables.PW#"
blockfactor="100">
    SELECT response_comment_id, response_comment, RESPONSE_COMMENT_TITLE
    from response_comments
    where agencyid = '<cfoutput>#variables.snlset_LOG_AGENCYID#</cfoutput>'
    order by response_comment
</CFQUERY>

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

<select id="commentDropDown">    

<option value="nothing">Nothing
<cfoutput>
<cfloop QUERY="GetResponseDropdown">
    <option value="#GetResponseDropdown.Response_Comment#">
    #GetResponseDropdown.Response_Comment_title#
</cfloop>
</cfoutput>
</select>
<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.

Regards,
:)mary
dropDownTitlesCommentsValues.xlsx
madrumPrinciple Applications DeveloperAsked:
Who is Participating?
 
_agx_Commented:
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;
	}
</script>
                                            
<form>
<select id="commentDropDown" onChange="nameSelected(this)"> 
<option value="nothing">Nothing</option>
<cfoutput query="GetResponseDropdown">
    <option value="#RESPONSE_COMMENT_ID#" comment="#HTMLEditFormat(GetResponseDropdown.Response_Comment)#">
    #GetResponseDropdown.Response_Comment_title#</option>
</cfoutput>
</select>	
<textarea id="commentText"></textarea>
</form>

Open in new window

0
 
GaryCommented:
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.
0
 
madrumPrinciple Applications DeveloperAuthor Commented:
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.

Regards,
:)mary
0
 
_agx_Commented:
You are very welcome :)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.