4 Replies Latest reply on Aug 28, 2009 1:33 PM by Andrew Rosewarn

    Get notified of change on form?

    Di1bert

      I have an <mx:Form> element. The form is used to submit some requests to a site. After a submission, a status label is displayed to show the successful submission along with a confirmation number (or an error message).


      When the user goes to submit a subsequent request, I need to blank out the status label as they start to enter the data. I am current doing this by calling a handler for the change event on all the form's items (e.g.the various TextInputs, ComboBoxes, CheckBoxes etc). This is potentially problematic if a new FormItem is added, but a change event if forgotten. It would be nicer if there was some way to handle an event if any of the data on the Form was changed. I am not seeing any event that is fired for such a thing. Is the way I am currently doing it the only way? Or is there an event that can be used that I am just not seeing.

       

      p.s. I am fairly new to Flex development, but have am not new to development in general.

        • 1. Re: Get notified of change on form?
          babo_ya Level 3

          It is NOT clear of ur issue. but, if I understood correctly.

           

          You could add an event listener for each controls, textInput, comboBox

           

          <mx:TextInput change="onTextChangeHandler(event);" />

          <mx:ComboBox click="onComBoClicked(event);" />

           

          BaBo,

          • 2. Re: Get notified of change on form?
            Di1bert Level 1

            Thanks for the reply. What you suggest is basically what I am doing:

             

            <mx:TextInput  id="one"  change="clearStatus(event);" />
            <mx:ComboBox id="two"  click="clearStatus(event);" />

             

            What I would like to do is eliminate all those calls and only call it on the <mx:Form> element. But from what I can tell, there is no way to handle a change to any data change within the form. I want to do this to keep the code cleaner and for maintenance purposes. As the form is changed, someone may forget to add a change handler to a new form item they add:

             

            <mx:TextInput  id="one"  change="clearStatus(event);" />
            <mx:TextInput  id="three"  />  // <-- this is now a bug
            <mx:ComboBox id="two"  click="clearStatus(event);" />

             

            There is now a bug in the code that the  status would not get updated immediately if that new form item was the first thing changed by the user.

             

            What I'd like is this:

             

            <mx:Form change="clearStatus(event);">
                <mx:FormItem>
                    <mx:TextInput  id="one"   />
                </mx:FormItem>
                <mx:FormItem>
                    <mx:TextInput  id="three"  />
                </mx:FormItem>
                <mx:FormItem>
                    <mx:ComboBox id="two"  />
                </mx:FormItem>
            </mx:Form>

             


            Or the equivalent of that since <mx:Form> does not have a change event. This type of thing can be done in other languages I worked in. That is an event is triggered on a parent container if the data in any of its child containers is changed. So I want to see if there is an equivalent way of doing it in Flex.

            • 3. Re: Get notified of change on form?
              Andrew Rosewarn Level 3

              Hi there Di1bert

               

              This should do the trick for you.  It loops through your form and adds the event listeners to each child when the form finishes its creation

               

              <?xml version="1.0" encoding="utf-8"?>

              <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" >

              <mx:Script>

              <![CDATA[

              import mx.core.UIComponent;

              import mx.containers.FormItem;

               

               

              private function addListeners():void {

              // Loop through all children in the form and add event listener.

              for each (var formItem:FormItem in myForm.getChildren()) {

              formItem.getChildAt(0).addEventListener(Event.CHANGE, handleChange);

              }

              }

               

              private function handleChange(event:Event):void {

              trace('changed')

              }

               

              ]]>

              </mx:Script>

              <mx:Form x="223" y="158" id="myForm" creationComplete="addListeners()">

              <mx:FormItem label="Label">

              <mx:ComboBox></mx:ComboBox>

              </mx:FormItem>

              <mx:FormItem label="Label">

              <mx:TextInput/>

              </mx:FormItem>

              <mx:FormItem label="Label">

              <mx:NumericStepper/>

              </mx:FormItem>

              <mx:FormItem label="Label">

              <mx:DateField/>

              </mx:FormItem>

              </mx:Form>

              </mx:Application>

               

              Hope this helps

                     

              • 4. Re: Get notified of change on form?
                Di1bert Level 1

                Thanks Andrew! I didn't even think about doing it programmatically. D'oh! Can you say "tunnel vision".