Techs-on-Call Computer Blog Keeping you informed about the world of computer issues

This was a problem for me while creating ColdFusion Flash forms. How do you transfer data back and forth between the Flash form? As it turns out, there were plenty of sites telling how to send data from Flash to JavaScript automatically. But the other way around, sending data from JavaScript to Flash in the cfform tag, I was unable to find any site that showed how. I was eventually able to come to the solution by reading several sites that had something close to what I needed. This example will show you how to do this. In our example, the data is sent automatically without the need to press any button.

First, the code. There are some parts which are tricky. Feel free to re-use this code as it was designed to be general purpose and re-usable.

<cfform format="flash" method="get" action="index.cfm" skin="haloblue" wmode="opaque" width="500" preservedata="no" preloader="true" name="example">
	<cfformgroup type="tabnavigator">
		<cfformgroup type="page" label="Send Data To JavaScript">
			<cfinput name="send" label="This text box will be sent to JavaScript" onkeyup="getURL('javascript:sendToJavascript(\'' + send.text + '\', \'toJavascript\')');">
		</cfformgroup>

		<cfformgroup type="page" label="Receive Data From JavaScript">
			<cfinput name="receive" label="This text box will show what was sent from JavaScript:">
		</cfformgroup>

		<cfformgroup type="page" label="Bind Example">
			<cfformgroup type="horizontal" label="Data sent TO JavaScript:">
				<cfformitem type="text" bind="{send.text}"></cfformitem>
			</cfformgroup>
			<cfformgroup type="horizontal" label="Data received FROM JavaScript:">
				<cfformitem type="text" bind="{receive.text}"></cfformitem>
			</cfformgroup>
		</cfformgroup>
	</cfformgroup>
</cfform>

<div>This data is FROM the Flash form: <span id="toJavascript"></span></div>
<div>This data will be sent TO the Flash form: <input type="text" name="toFlash" onkeyup="sendToFlash(this.value, 'example', 'receive')" /></div>

<script type="text/javascript">
function sendToJavascript(data, HTML_id) {
	document.getElementById(HTML_id).innerHTML = data;
}

function sendToFlash(data, Flash_id, Flash_var) {
	var flash = getFlashMovieObject(Flash_id);
	flash.SetVariable(Flash_var + ".text", data);
}



function getFlashMovieObject(n) {
	if (window.document[n]) return window.document[n];

	if (navigator.appName.indexOf("Microsoft Internet") == -1) {
		if (document.embeds && document.embeds[n])
			return document.embeds[n]; 
	}
	else return document.getElementById(n);
}
</script>

Now some explination.

For the Flash form, thanks to ColdFusion, most of it should be very obvious. The first cfformgroup tag tells us that this form is divided into tabs. The nested cfformgroup tags show which data goes on this particular page. And the cfinput tag is used to enter data into the form. All that is fairly obvious.

 onkeyup="getURL('javascript:sendToJavascript(\'' + send.text + '\', \'toJavascript\')');"

If you notice the cfinput tag on the first tab page has the onkeyup event. This calls the ActionScript that follows. To call a JavaScript function in ActionScript, you must use the ActionScript getURL function. The parameters of the getURL function must be a string, that is why there is a single quote. Next there is javascript: which lets the function know to use JavaScript. What follows after the colon is our function. Here is where some confusion may set in. Unless the JavaScript function is expecting a number, the data sent to it must also be a string. If we just use a single quote, what follows would be considered something in ActionScript. The single quote for a string would never be sent. A double quote would end the onkeyup event. Therefore, to send a single quote to the JavaScript function, it must be escaped. That is why you see the \' in the getURL function. Be careful, because if a single quote is opened, it must also be closed. Therefore, looking at our first parament for the JavaScript function sendToJavascript, we see it is really sending this data: 'whatever is in our send textbox'. The second parameter tell the JavaScript the ID of the HTML element where the data will be placed. Notice that since we do not need to send any ActionScript variable, there is only the \' in the parameter.

flash.SetVariable(Flash_var + ".text", data);

As it turns out, sending JavaScript data to the cfform Flash form is very easy. In our JavaScript function, we simply call the Flash movie object's SetVariable function. This function does start with the capital S. The parameters of SetVariable are (Flash Variable, Value). ActionScript is much like JavaScript, which is why if you want the change the text of a certain cfinput element, you must put the ".text" part after the telling which variable to use.

See it in action.