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 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>

Developing Web Applications with ColdFusion
Chapter 15 : Interacting with Remote Servers