Vixiom Axioms

December 21, 2006

Flex loop over form values (mx:Form, mx:FormItems)

Filed under: ActionScript, Flex Alastair @ 11:59 am

I’ve been messing around with the FlexOnRails Cairngorm/WebORB app and wanted to add some more fields to the flex form for projects (I’m building a construction project tracker so I need to add the project’s address). However as I’m a lazy programmer I quickly got tired of typing all the values to be passed in the event dispatcher. Here’s the original code:

private function projectFormValues () : Object
{
    var values : Object = new Object();

    values.street_address = street_address.text;
    values.suite = suite.text;
    values.city = city.text;
    // etc…

    return values;
}

And below is my revised ‘projectFormValues’ method, it now loops over the form and gets all the values:

private function projectFormValues () : Object
{
    var values : Object = new Object();

    // get form items
    var formItems = project_form.getChildren();

    // loop items and add values
    for (var i = 0; i < formItems.length; i++)
    {
        // formItem
        var formItem = formItems[i].getChildren();
        values[formItem[0].name] = formItem[0].text;
    }

    return values;
}

The form just for reference…

<mx:Form height=“100%” width=“100%” id=“project_form”>
        <mx:FormItem label=“Street Address:”>
            <mx:TextInput id=“street_address” text=“{model.selectedProject.street_address}”/>
        </mx:FormItem>
        <mx:FormItem label=“Suite:”>
            <mx:TextInput id=“suite” text=“{model.selectedProject.suite}”/>
        </mx:FormItem>
        <mx:FormItem label=“City:”>
            <mx:TextInput id=“city” text=“{model.selectedProject.city}”/>
        </mx:FormItem>
        <!– more form items… –>
    </mx:Form>
Digg! submit Flex loop over form values (mx:Form, mx:FormItems) to stumbleupon.com submit Flex loop over form values (mx:Form, mx:FormItems) to del.icio.us submit Flex loop over form values (mx:Form, mx:FormItems) to reddit.com Like this post? subscribe to the feed.

3 Comments »

  1. Very nice and DRY. It would be nice if the Form component had a method to do this.

    Best,

    Derek

    Comment by Derek Wischusen — December 21, 2006 @ 2:21 pm

  2. Good job but I am getting errors.

    1.) When no data is inserted into the form field
    2.) How do I submit the entire object to a CFC for data posting!

    Comment by Grover Fields — February 26, 2007 @ 7:52 am

  3. Im Flex Builder 3 occurr error

    1008: variable ‘formItem’ has no type declaration.

    1008: variable ‘formItems’ has no type declaration.

    1008: variable ‘i’ has no type declaration.

    For i

    i using

    for( var i:int = 0; i < formItems.length; i++ ){

    And this ok

    How to resolve others ?

    Please you Helpe me

    Comment by MArcio — January 28, 2008 @ 8:28 pm

RSS feed for comments on this post. TrackBack URL

Leave a comment

*
To prove you're a person (not a spam script), type the security word shown in the picture.
Anti-Spam Image

Powered by WordPress