How do I create an appropriate array of form elements with jQuery that can be used in a ColdFusion function?

Question

I have a pretty standard contact form that uses a cfc for processing now. I want to use .post for users that have javascript turned on. I've created an array with jQuery of the form elements and I want to pass that to the same CFC (without modifying the CFC) but I'm not certain how to do it. Basically, I want to pass something called 'formData' as an argument to the CFC (as I do with just the basic server side code), and then parse it in the CFC. Right now I'm just using a cfdump in the cfc (which works fine with a non-java submit) but it doesn't work with this set-up. Any ideas?

Here's my jQuery

$('#theForm').submit(function(e) {
    e.preventDefault();

    var formData = {};
    $('form [name]').each(function(){
        formData[this.name] = this.value;
    });
    $.post("cfc/engine.cfc?method=collectdata&returnformat=json",
           {'formData': formData}
           );
});

And my CFC

<cffunction name="collectdata" access="remote" output="false" returntype="void">
  <cfargument name="formData" type="struct" required="yes">
  <cfdump var="#formData#">
  <cfabort>
</cffunction>

Answer 1

This is another one of those times when I wish that I had a server at my fingertimes 24/7...

Looking closer at your CFC, it lookds like you are requiring formData to be a struct. However, IIRC, JSON is considered a string, and you'll have to deserialize it manually.

Try changing the type to string, or removing it altogether.

Edit: Looks like jquery.post() sends a standard http post, not an AJAX/webservice call. So, the contents will get put into the form scope, if I'm understanding all of the scattered docs correctly.

Answer 2

Prepare your javascript array by serializing it to JSON. An easy and rigorous way to do this is with Crockford's json2js. So you'd have:

<script src="json2.js"></script>

...and then:

var your_params = [ 'this','that','theother' ]; // your js array
var s_params = JSON.stringify( your_params ); // now as json

...and then in your .post():

{'formData': s_params}

Set your cfc to receive an argument of type string (or any). In the cfc, use deserializeJson() on the incoming argument:

<cffunction name="collectdata" output="false" access="remote" returntype="void">
  <cfargument name="formData" type="string" required="yes">
  <cfset var result = deserializejson(arguments.formData)><!--- make a CF array --->
  <cfset var foo = isArray(result)> <!--- TRUE! --->
  <!--- ... etc ... --->
</cffunction>

So you've taken a javascript array, serialized it to JSON, sent it to your cfc which received it as a string, then deserialized it to a "native" CF array. The same thing will work for transporting js objects/structs between javascript and CF respectively (as opposed to the simple array in this example).