4 Replies Latest reply on Dec 2, 2006 12:45 PM by moros3

    outputting values from selected radiobuttons

    moros3
      Hello,

      This is an application that would allow users to go through a step-by-step process to build their product, in this case, it's ice cream.


      Description:

      There are six radio buttons, four belonging to one radiobuttongroup, and the other two belonging to another radiobuttongroup. Also, there is an mx:TextArea (with editable set to False).

      This panel will most likely be going in an mx:ViewStack as the "first step" in the ice cream customization process. The selection of one radiobutton from each radiobuttongroup must be mandatory in order to proceed (go to the next "step", as in the next panel in the ViewStack).

      Problem:

      Allowing the user to select one item from each of the two radiobuttongroups, and writing both selected radiobutton's values [as specified by the radiobutton's value="radioButtonValue" property] to the mx:TextArea, on different lines.

      I was mildly successful in attempting to do this, but I didn't know how to write two values to the same text box
      without them overwriting each other.

      Misc.

      Initially, I tried something to the effect of: ( modified from flex 2 component explorer)

      <mx:Script>
      <![CDATA[

      import mx.events.ItemClickEvent;

      // Event handler function to display the selected button
      // in a TextArea.
      private function handleConeType(event:ItemClickEvent):void
      {
      if (event.currentTarget.selectedValue == "sugarCone")
      {
      iceConeTextBox.text="Sugar Cone";
      }
      else
      {
      if (event.currentTarget.selectedValue == "waferCone")
      {
      iceConeTextbox.text = "Wafer Cone";
      }
      }
      }
      }
      ]]>
      </mx:Script>
      Quite a stretch at getting something to work, I know. It was not very efficient, and I sincerely hope there are better ways of doing this.

      I'd like to avoid the use of two mx:textareas if at all possible.

      Example

      Here's a link to better describe what I'm talking about (note: View Source is enabled).

      ConeChooser Application


      Thank you!
        • 1. Re: outputting values from selected radiobuttons
          michael_ramirez44 Level 1
          Use string concatenation with carriage return.

          iceConeTextBox.text += "Sugar Cone\n";
          • 2. Re: outputting values from selected radiobuttons
            moros3 Level 1
            I'll be sure to try it, but there are still many things left unanswered, such as being mandatory in order to go to the next panel in a ViewStack, and what kind of code may be used to get all 6 radiobuttons functioning as needed.
            • 3. outputting values from selected radiobuttons
              chris.huston.t10 Level 3
              You can access the radio button groups selected value from the radio button group id so you do not need to check each radio button individually. So coneType.selectedValue will give you the value of whatever radio button is currently selected in the group and coneType.selection.label will give you the label of the currently selected radio button or null if none are selected.

              Try this code:

              <?xml version="1.0" encoding="utf-8"?>
              <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml"
              width="100%" height="100%" layout="absolute">
              <mx:Script><![CDATA[

              private function updateText():void {
              var totalSelected:uint = 0;
              var cone:String = "";
              var size:String = "";
              if (coneType.selectedValue != null) {
              cone = coneType.selection.label;
              totalSelected++;
              }
              if (coneSize.selectedValue != null) {
              size = coneSize.selection.label;
              totalSelected++;
              }
              iceConeTextBox.text = cone + "\r" + size;
              if (totalSelected == 2) {
              next_btn.enabled = true; //for going to next view in viewstack
              }
              }
              ]]></mx:Script>
              <mx:Panel title="Cone Type Selection" height="240" width="354"
              horizontalCenter="0.5" verticalCenter="0.5" layout="absolute">
              <mx:Label width="230" color="blue"
              text="Select your cone." y="10" height="44" fontSize="25" horizontalCenter="0"/>

              <mx:RadioButtonGroup id="coneType" change="updateText()"/>
              <mx:RadioButtonGroup id="coneSize" change="updateText()"/>

              <mx:RadioButton groupName="coneType" id="sugarCone" value="sugarCone"
              label="Sugar Cone" width="150" x="2" y="62"/>
              <mx:RadioButton groupName="coneType" id="waffleCone" value="waffleCone"
              label="Waffle Cone" width="150" x="2" y="88"/>
              <mx:RadioButton groupName="coneType" id="waferCone" value="waferCone"
              label="Wafer Cone" width="150" x="2" y="114"/>
              <mx:RadioButton groupName="coneType" id="chocoDipWaferCone" value="chocoDipWaferCone"
              label="Chocolate Dipped Wafer Cone" width="201" x="2" y="140"/>

              <mx:RadioButton id="smallCone" x="81" y="171" label="Small" fontSize="14" groupName="coneSize"/>
              <mx:RadioButton id="largeCone" x="159" y="171" label="Large" fontSize="14" groupName="coneSize"/>
              <mx:TextArea id="iceConeTextBox" x="130" y="62" height="70" text="text changes here" editable="false" width="194"/>
              <mx:Button x="272" y="168" label="next" enabled="false" id="next_btn"/>
              </mx:Panel>
              </mx:Application>

              Vygo
              • 4. outputting values from selected radiobuttons
                moros3 Level 1
                Thanks, Vygo! That's very useful, and it solved my problem.