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 with columns firstName and lastName var personInfo = new WddxRecordset(new Array("firstName", "lastName")); // Add next record to end of personInfo recordset 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" BALUE="Next" onclick="doNext()"> <INPUT TYPE="button" BALUE="Serialize" onclick="serializeData(personInfo, document.personForm.wddxPacket)"> <INPUT TYPE="submit" BALUE="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>