1 Reply Latest reply on Jul 31, 2009 7:51 AM by Gregory Lafrance

    Dynamically add form field

    srtr4k

      I'm trying to allow the end user to add multiple contacts to a form dynamically by selecting an "add" button - essentially, the user fills out the first contact - e.g. first name, last name, and title, then the end user can click the "add" button and another row will be added under the previous row with the same 3 fields - first name, last name, and title.

       

      Any idea on where to start?

       

      Thanks in advance

        • 1. Re: Dynamically add form field
          Gregory Lafrance Level 6

          You could of course clean up this code.

           

          If this post answers your question or helps, please mark it as such.

           

          <?xml version="1.0"?>
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
            <mx:Script>
              <![CDATA[
                import mx.controls.Spacer;
                import mx.controls.Label;
                import mx.containers.HBox;
                import mx.containers.FormItem;
               
                private function addData():void{
                  var formItem:FormItem = new FormItem();
                  var fnl:Label = new Label();
                  fnl.text = "First Name:";
                  var sp1:Spacer = new Spacer();
                  sp1.width = 20;
                  var fn:TextInput = new TextInput();
                  fn.text = fname.text;
                  fname.text = "";
                  var lnl:Label = new Label();
                  lnl.text = "Last Name:";
                  var sp2:Spacer = new Spacer();
                  sp2.width = 20;
                  var ln:TextInput = new TextInput();
                  ln.text = lname.text;
                  lname.text = "";
                  var ttl:Label = new Label();
                  ttl.text = "Title:";
                  var tt:TextInput = new TextInput();
                  tt.text = title.text;
                  title.text = "";
                  var hb:HBox = new HBox();
                  hb.setStyle("paddingLeft", 15);
                  hb.addChild(fnl);
                  hb.addChild(fn);
                  hb.addChild(sp1);
                  hb.addChild(lnl);
                  hb.addChild(ln);
                  hb.addChild(sp2);
                  hb.addChild(ttl);
                  hb.addChild(tt);
                  formItem.addChild(hb);
                  form.addChildAt(hb, form.numChildren);
                }
              ]]>
            </mx:Script>
            <mx:Form id="form">
              <mx:FormHeading label="Enter Data" fontWeight="bold"/>
              <mx:FormItem>
                <mx:HBox>
                  <mx:Label text="First Name:"/>       
                  <mx:TextInput id="fname"/>
                  <mx:Spacer width="20"/>
                  <mx:Label text="Last Name:"/>       
                  <mx:TextInput id="lname"/>
                  <mx:Spacer width="20"/>
                  <mx:Label text="Title:"/>       
                  <mx:TextInput id="title"/>
                </mx:HBox>
              </mx:FormItem>
              <mx:FormItem>
                <mx:Button label="Add" click="addData();"/>
              </mx:FormItem>
              <mx:FormItem width="100%">
                <mx:HRule width="100%"/>
              </mx:FormItem>
            </mx:Form>
          </mx:Application>