Transferring Data from Browser to Server

This example serializes form field data, posts it to the server, deserializes it, and outputs the data. For simplicity, only a small amount of data is collected. In applications where complex JavaScript data collections are generated, this basic approach can be extended very effectively.

<!--- Get WDDX JS utility objects --->
<script language="JavaScript"
src="/CFIDE/scripts/wddx.js"></script>

<!--- Add data binding code --->
<script>

// Generic serialization to a form field
function serializeData(data, formField)
{
wddxSerializer = new WddxSerializer();
wddxPacket = wddxSerializer.serialize(data);
if (wddxPacket != null)
{
formField.value = wddxPacket;
}
else
{
alert("Couldn't serialize data");
}
}

// Person info recordset
var personInfo = new WddxRecordset(new Array("firstName",
"lastName"));

// Add next record
function doNext()
{
nRows = personInfo.getRowCount();
personInfo.firstName[nRows] =
document.personForm.firstName.value;
personInfo.lastName[nRows] = document.personForm.lastName.value;
document.personForm.firstName.value = "";
document.personForm.lastName.value = "";
}

</script>

<!--- Data collection form --->
<form action="wddx_browser_2_server.cfm" method="post"
name="personForm">

<!--- Input fields --->
Personal information<p>
First name: <input type=text name=firstName><br>
Last name: <input type=text name=lastName><br>
<p>

<!--- Navigation & submission bar --->
<input type="button" value="Next" onclick="doNext()">
<input type="button" value="Serialize"
onclick="serializeData(personInfo, document.personForm.wddxPacket)">
<input type="submit" value="Submit">
<p>

<!--- This is where the WDDX packet will be stored --->
WDDX packet display:<p>
<textarea name="wddxPacket" rows="10" cols="80" wrap="Virtual"><
/textarea>

</form>

<!--- Server-side processing --->
<hr>
<p><b>Server-side processing</b><p>
<CFIF isdefined("form.wddxPacket")>
<CFIF form.wddxPacket neq "">

<!--- Deserialize the WDDX data --->
<CFWDDX action="wddx2cfml" input=#form.wddxPacket#
output="personInfo">

<!--- Display the query --->
The submitted personal information is:<p>
<CFOUTPUT query=personInfo>
Person #CurrentRow#: #firstName# #lastName#<br>
</CFOUTPUT>
<CFELSE>
The client did not send a well-formed WDDX data packet!

</CFIF>
<CFELSE>
No WDDX data to process at this time.
</CFIF>