Adobe ColdFusion 8

Transferring data from the browser to the server

The following example serializes form field data, posts it to the server, deserializes it, and displays the data. For simplicity, it only collects a small amount of data. In applications that generate complex JavaScript data collections, you can extend this basic approach very effectively. This example uses the WddxSerializer JavaScript object to serialize the data, and the tag to deserialize the data.

Use the example

  1. Save the file under your webroot directory, for example in wwwroot/myapps/ wddxserializedeserialze.cfm.
  2. Display http://localhost/myapps/wddxserializedeserialze.cfm in your browser.
  3. Enter a first name and last name in the form fields.
  4. Click Next.

    The name appears in the Names added so far box.

  5. Repeat steps 3 and 4 to add as many names as you wish.
  6. Click Serialize to serialize the resulting data.

    The resulting WDDX packet appears in the WDDX packet display box. This step is intended only for test purposes. Real applications handle the serialization automatically.

  7. Click Submit to submit the data.

    The WDDX packet is transferred to the server-side processing code, which deserializes it and displays the information.

<!--- load the wddx.js file --->
<script type="text/javascript" src="/CFIDE/scripts/wddx.js"></script>

<!--- 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
    // Make sure the case of field names is preserved
    var personInfo = new WddxRecordset(new Array("firstName", "lastName"), true);

    // Add next record to end of personInfo recordset
    function doNext() {
        // Extract data
        var firstName = document.personForm.firstName.value;
        var lastName = document.personForm.lastName.value;
        
        // Add names to recordset
        nRows = personInfo.getRowCount();
        personInfo.firstName[nRows] = firstName;
        personInfo.lastName[nRows] = lastName;
        
        // Clear input fields
        document.personForm.firstName.value = "";
        document.personForm.lastName.value = "";
        
        // Show added names on list
        // This gets a little tricky because of browser differences
        var newName = firstName + " " + lastName;
        if (navigator.appVersion.indexOf("MSIE") == -1) {
            document.personForm.names[length] = 
                new Option(newName, "", false, false);
        }
        else {
            // IE version
            var entry = document.createElement("OPTION");
            entry.text = newName;
            document.personForm.names.add(entry);
        }
    }
</script>

<!--- Data collection form ---> 
<form action="#cgi.script_name#" method="Post" name="personForm">

    <!--- Input fields --->
    Personal information<br>
    First name: <input type=text name=firstName><br>
    Last name: <input type=text name=lastName><br>
    <br>
    
    <!--- 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">
    <br><br>
    Names added so far:<br>
    <select name="names" size="5">
    </select>
    <br>
    
    <!--- This is where the WDDX packet will be stored --->
    <!--- In a real application this would be a hidden input field. --->
    <br>
    WDDX packet display:<br>
    <textarea name="wddxPacket" rows="10" cols="80" wrap="Virtual">
    </textarea>
    
</form>


<!--- Server-side processing --->
<hr>
<b>Server-side processing</b><br>
<br>
<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:<br>
        <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>