Clear form fields : Form « Components « Flex

1. Flex
2. Components
3. Form

Clear form fields

           
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="500"
    height="600">
    <mx:Script>
        
        import mx.events.*;
        import mx.collections.*;

        public function addPerson():void {
            ac.addItem({first:firstInput.text, last:lastInput.text,email:emailInput.text});
            clearInputs();
        }
        public function removePerson():void {
            if (dg.selectedIndex >= 0) {
                ac.removeItemAt(dg.selectedIndex);
            }
        }
        public function updatePerson():void {
            if (dg.selectedItem !== null) {
                ac.setItemAt({first:firstInput.text, last:lastInput.text,email:emailInput.text}, dg.selectedIndex);
            }
        }
        public function dgChangeHandler():void {
            clearInputs();
            firstInput.text = dg.selectedItem.first;
            lastInput.text = dg.selectedItem.last;
            emailInput.text = dg.selectedItem.email;
        }
        public function clearInputs():void {
            firstInput.text = "";
            lastInput.text = "";
            emailInput.text = "";
        }
        public function myLabelFunc(item:Object):String {
            return item.first + " " + item.last;
        }
      
    </mx:Script>
    <mx:ArrayCollection id="ac">
        <mx:source>
            <mx:Object first="A" last="B" email="a@m.com" />
            <mx:Object first="C" last="D" email="c@m.com" />
            <mx:Object first="E" last="F" email="e@m.com" />
        </mx:source>
    </mx:ArrayCollection>
    <mx:DataGrid width="450" id="dg" dataProvider="{ac}" change="dgChangeHandler()">
        <mx:columns>
            <mx:DataGridColumn dataField="first" headerText="First Name" />
            <mx:DataGridColumn dataField="last" headerText="Last Name" />
            <mx:DataGridColumn dataField="email" headerText="Email" />
        </mx:columns>
    </mx:DataGrid>
    <mx:Form>
        <mx:FormItem label="First Name">
            <mx:TextInput id="firstInput" />
        </mx:FormItem>
        <mx:FormItem label="Last Name">
            <mx:TextInput id="lastInput" />
        </mx:FormItem>
        <mx:FormItem label="Email">
            <mx:TextInput id="emailInput" />
        </mx:FormItem>
    </mx:Form>
    <mx:HBox>
        <mx:Button label="Add New" click="addPerson()" />
        <mx:Button label="Update Selected" click="updatePerson()" />
        <mx:Button label="Remove Selected" click="removePerson()" />
        <mx:Button label="Clear" click="clearInputs()" />
    </mx:HBox>
</mx:Application>

   
    
    
    
    
    
    
    
    
    
    
  

Related examples in the same category

1.	Making use of form-related containers
2.	Form Radio button group
3.	Login form and get password back form
4.	Add submitForm() and debugMessage() functions as click event handlers
5.	Register the submitForm() and debugMessage() handler functions with b1's click event
6.	Form item label
7.	Empty form tag
8.	FormHeading control
9.	A form for first name, last name, address, city, zip code and country
10.	Form Text required field
11.	submit function can access the form control data directly
12.	Populating a Form control from a data model
13.	Switch form with Transition
14.	Form control bar
15.	Form field with Label
16.	Add the submitForm() and debugMessage() functions as handlers of the click event:
17.	Register the submitForm() and debugMessage() handler functions
18.	Add form header to a form
19.	Bind form input control to Model
20.	Form label with icon
21.	One form two FormHeadings
22.	Model data and form controls
23.	Password form field
24.	Contact Editor Form
25.	Travel form
26.	Form with ControlBar
27.	Form Multiple Headings
28.	Adding border to Form
29.	defines the FormHeading control
30.	Using Form controls to hold your form data
31.	The submit function can access the form control data directly,
32.	Form Data Model Value
33.	A form that reads static data from a data model to obtain the value for a form field
34.	Adding a load event and a fault event to the form.
35.	Select a value for the formatString property from the drop-down list
36.	Show individual times for the initialization and creation of each form element.
37.	Register a single listener function, submitForm(), with two different buttons
38.	Form Button
39.	Form default button
40.	The form and the buttons overlap as the application grows smaller, for example.
41.	Form with Button
42.	Login Example
43.	Checking the box could make the user e-mail field required