Quantcast

Form Post in Spry

Get the WebProNews Newsletter:


[ Business]

Last week or so I blogged about doing form postings with Spry.

I was asked to provide a bit more documentation so I thought I’d show a slightly more detailed example.

First lets start with a very simple form:

<form>
number one: <input type="text" name="one" id="one"><br>
number two: <input type="text" name="two" id="two"><br>
</form>

This form has two simple text fields named one and two. I want to use Spry to send the values of these two fields to the server. First lets add a simple button:

<input type="button" value="Add" onClick="doAddPost()">

This simply fires off a JavaScript function. I’m going to break the function up and explain each and every line to make it as clear as possible. First, start the function.

function doAddPost() {

We need to know where we will be posting the form, so next I define the URL:

var url = "moon.cfm";

Now I need to grab the values I want to post. Normally with a submit button you don’t have to worry about this. The browser simply sends all the form fields. In this case though I have to specify the fields manually. First I’ll grab the value of the form field, one, using the Spry/Prototype $() shortcut:

var one = $("one").value;

Then I’ll grab the value from the second form field:

var two = $("two").value;

The form post data must be sent like a query string: foo1=value1&foo2=value2. Again, I have to do this by hand:

var formData = 'one='+one+'&two='+two;

Next I encode any values in the string, like spaces or other special characters:

formData = encodeURI(formData);

So the last thing we do is run the Spry code that will handle the form post. I talked about this more in the last post so I won’t spend a lot of time on it.

Spry.Utils.loadURL(‘POST’, url, true, resFunc, {postData: formData, headers: {“Content-Type”: “application/x-www-form-urlencoded; charset=UTF-8″}});

The first argument defines the type of request (GET or POST). The second argument is the URL value I defined earlier. The third argument defines if the call is asynchronous or not. The fourth argument defines a function to run with the result of the HTTP call.

Lastly there is a structure of arguments that define the request. Again I have to thank Keith for figuring this out.

So here is the function again all in one code block:

function doAddPost() {
    var url = "moon.cfm";
    var one = $("one").value;
    var two = $("two").value;
    var formData = 'one='+one+'&two='+two;
    formData = encodeURI(formData);
    Spry.Utils.loadURL('POST', url, true, resFunc, {postData: formData, headers: {"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"}});
}

So how do we handle this server side? We have a few options. As I mentioned, the loadURL function lets you define code to run with the result. So whatever the server returned I can work with in JavaScript. This can be either a string or XML or WDDX. To make it easier I’ll just return a simple string:

<cfsetting enablecfoutputonly=true>
<cfparam name="form.one" default="0">
<cfparam name="form.two" default="0">

<cfif isNumeric(form.one) and isNumeric(form.two)>
    <cfoutput>#form.one+form.two#</cfoutput>
<cfelse>
    <cfoutput>0</cfoutput>
</cfif>

Obviously there isn’t anything too complex here, just the addition of two numbers. I take the result and simply output it directly to the client requesting the data. With me so far?

Now let’s return to JavaScript and work with the result. I had specified the a function named resFunc would handle the result. The function is all of 4 lines:

function resFunc(request) {
    var result = request.xhRequest.responseText;
    $("result").innerHTML = "Result was: " + result;
}

Spry automatically passes a collection of data back. The information I’m interested in resides in xhRequest.responseText. Once I have that, I can write out the result in the browser.

So I had mentioned more than once I wanted to make this process a bit simpler. Here is my first draft at it:

function doFormPost(url,formlist,resfunc) {
    var formdata = '';
    var formarray = formlist.split(',');
    for(var i=0; i < formarray.length; i++) {
      formdata+='&'+formarray[i]+'=';
      var fValue = $(formarray[i]).value;
      formdata+=fValue;
    }
    formData = encodeURI(formdata);
    Spry.Utils.loadURL('POST', url, true, resfunc, {postData: formdata, headers: {"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"}});
}

This lets you pass in a url and a list of form fields to post. The third argument is optional. So to do a Spry post you can do this instead of the button and custom function I had before:

<input type="button" value="Add3" onClick="doFormPost('moon.cfm', 'one,two',resFunc)">

As I said though this is just a first draft. Right now it assumes just text fields.

Comments

Tag:

Digg | Reddit | Furl

Bookmark WebProNews:

Raymond Camden, ray@camdenfamily.com
http://ray.camdenfamily.com

Raymond Camden is Vice President of Technology for roundpeg, Inc. A long
time ColdFusion user, Raymond has worked on numerous ColdFusion books
and is the creator of many of the most popular ColdFusion community web
sites. He is an Adobe Community Expert, user group manager, and the
proud father of three little bundles of joy.

Form Post in Spry
About Raymond Camden
Raymond Camden, ray@camdenfamily.com
http://ray.camdenfamily.com

Raymond Camden is Vice President of Technology for roundpeg, Inc. A long time ColdFusion user, Raymond has worked on numerous ColdFusion books and is the creator of many of the most popular ColdFusion community web sites. He is an Adobe Community Expert, user group manager, and the proud father of three little bundles of joy. WebProNews Writer
Top Rated White Papers and Resources
  • Purnima

     

    Hi,
    I have a query and i am really struggling with it. Below are the details
    " In my cfm page I need to validate input fields before I submit my page, therefore i cannot keep the input type as submit for submit (as it will submit the page whatsoever). So i kept the type for submit as button and when it returns true I am redirecting to same page.
    My problem is that when return is true I need to perform some action. i am just not getting how to do it:
    My code is as below:
    function funcSaveFinal()
    {
                alert(funcSave());
                if(funcSave()==true)
                            {
                                        var saveButton=document.getElementById(‘save’);
                                        var saveAction=document.getElementById(‘saveAction1′);        
                                        saveAction.value=saveButton.value;                      
                                        alert(saveAction.value);
                                        <!—var SaveHolidayForm =document.getElementById("frmHolidayList");   
                                        SaveHolidayForm.action = "holidaylists.cfm";
                                                    //alert(SaveHolidayForm.action)
                            SaveHolidayForm.method = "post";
                                        SaveHolidayForm.submit();—>
                                        //saveAction.value=saveButton.value;
                            }
    }
     
     
    <CFINPUT name="Save" type="button" value="Save" id="save" onClick="funcSaveFinal();">
     
     
    Please reply. I need help on this
  • Join for Access to Our Exclusive Web Tools
  • Sidebar Top
  • Sidebar Middle
  • Sign Up For The Free Newsletter
  • Sidebar Bottom