Dynamically add text into body as I click <Select> indexes in coldfusion - dynamic

Question

On my cold fusion page what I want to do is click one of the options from my <Select> statement. After doing so I want to see a richtextbox be dynamically filled with a matching record in my database from the value of the item I clicked. I also want it to do the same for a checkbox, and authors object.
Each object already has a column in my database, what is left is to add this dynamic feature to fill in my data for editing a post.
My code looks like this:
<!--- Query --->
<cfquery name="Posts" datasource="Postings">
Select *
from BlogPosts
</cfquery>
<!--- Fill Listbox --->
<cfselect name="LoopPosts" size="12">
<cfoutput query="Posts"><option value="#PostID#">
#PostTitle#</option></cfoutput>
</cfselect>
<!--- Secondary Query --->
<cfquery name="PostsQuery" datasource="Postings">
Select *
from BlogPosts
</cfquery>
<!--- Fill --->
<cftextarea style="width: 1000px; height: 600px;" name="PostBody" id="blog"><cfoutput query="Postquery">#PostBody#</cfoutput></cftextarea>
<input name="ActivePost" type="checkbox" value="<cfoutput query="Postquery">#Active#</cfoutput>">

Answer 1

Let me try to redeem myself with a modified answer:
You can dynamically reapply options to elements using ajax calls to your cfc file (since cfc bind is apparently a no-no) by adding an event listener to the first select field and calling the method in the cfc file via an AJAX get request. In the success function, you can then update the response to the textarea field.
Every time a selection is made from the select box, the text box will refresh the data with the appropriate query result.
The HTML page could look something like this:
<script type="text/javascript">
document.forms['yourformname'].elements['LoopPosts'].addEventListener('click', function(){
$.ajax({
type:"GET",
url: "yourcfcfilename.cfc?method=GetSelectedPost",
data: {selectedPost : this.value},
success: function(response) {
document.forms['yourformname'].elements['PostBody'].innerHTML = response;
},
error : function(XMLHttpRequest, textStatus, errorThrown) {
alert("Status: " + textStatus); alert("Error: " + errorThrown);
}
});
});
</script>
And the cfc page could look something like this:
<cfcomponent displayname="Post Functions" output="true">
<!--- Secondary Query --->
<cffunction name="GetSelectedPost" access="remote" returntype="String">
<cfargument name="selectedPost" type="string" required="true">
<cfquery name="PostsQuery" datasource="Postings">
SELECT PostBody
FROM BlogPosts
WHERE PostID = <cfqueryparam value="ARGUMENTS.selectedPost">
</cfquery>
<cfreturn PostsQuery.PostBody>
</cffunction>
</cfcomponent>
Every time a selection is made from the select box, the text box will refresh the data with the appropriate query result.