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