Twitter: raymondcamden

Address: Lafayette, LA, USA

Doing a form POST in Spry

01-14-2007 5,008 views 9 Comments

I blogged about half a year ago on how to send data with Spry. One thing I had not done (until recently) was send a form POST with Spry. Keith, over on the Spry forums, posted a good example on how to do it. With his permission I'm reposting his example. (With a slight modification or two.)

The basic syntax to do a POST with Spry works like so:

view plain print about
1Spry.Utils.loadURL('POST', url, true, resFunc, {postData: formData, headers: {"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"}});

The first argument simply specifies that we are using a POST instead of a GET operation. The second argument is the URL to load. The third argument specifies if the operation should be asynchronous or not. The next argument is the function to run when the HTTP operation is finished. The next set of arguments are options to pass along to the HTTP operation. The headers should be used as is, and formData in this example points to a string that contains your form information. Here is an example:

view plain print about
1var fname = $("FName").value;
2var lname = $("LName").value;
3var cred = $("Credentials").value;
5//Create a string of data
6var formData = 'firstname='+fname+'&lastname='+lname+'&credentials='+cred;
7formData = encodeURI(formData);

By the way - I plan on writing a simpler method to handle this.


These comments will soon be imported into Disqus. To add a comment, use Disqus above.
  • Commented on 01-14-2007 at 11:38 PM
    Ray, Can you comment on why (and maybe give an example) on when you would NOT want to do the Spry call asyncronously (async=false)?
  • Commented on 01-15-2007 at 6:52 AM
    Here is an example of where you would NOT want it to be asynch: You are doing an operation that changes the form. So for example, I have a subform next to a drop down. When I hit the button on the subform, it adds new data and changes the drop down. By keeping it not asynch, I can "pause" the whole form while it adds the data.
  • Commented on 01-15-2007 at 7:17 AM
    Another example of wanting to wait: I've got a form that posts into a CFM page. That cfm page will generate a new graph via cfchart. We want to wait for that process to end before, in the result function, we update the view with the updated chart. If you have a process that other functionality is dependant upon, then you should plan to not use an async call.
  • Commented on 01-16-2007 at 2:12 AM
    Gotcha. Makes good sense.
  • Mark #
    Commented on 01-29-2007 at 1:51 AM
    Hi Ray,

    Could you consider writing a tutorial with all the bits together for us slower learners. I mean, make a say, 5 field form that updates to mysql, do the async call with spry post and then return the newly updated record back to the page to update a div in the page. Would you consider doing this for a farm boy like me? :)
  • Commented on 01-29-2007 at 5:16 AM
    Sure. I've had an idea in my head for a while now. I'll try to get it this week before I leave for the Frameworks conf.
  • Mark #
    Commented on 01-29-2007 at 1:42 PM
    Thank you SOOOO much Ray, I really look forward to this one, I really want to get a look at how this thing works with forms.
  • Tim Mushen #
    Commented on 02-02-2007 at 12:48 AM
    Hi Ray,
    Yes, that would be helpful for us the remedial spry crowd.

    What about a CF version of the ( example?
  • Commented on 02-02-2007 at 7:47 AM
    I did do a follow up: