Textfields can be used to list values associated with checkboxes or radio buttons. To do so, follow the instructions below.


1. Within the form editor, add a textfield or textarea as normal and set the properties fieldLabel and name as you wish. You will use the name to refer to the field/box later.


2. Next add checkboxes and/or radio buttons as required.

  • For checkboxes you also need to add the properties handler and inputValue.
  • For radio buttons you also need to add the properties handler and name.


Your fields will now have the same five properties whether you are using checkboxes or radio buttons. (The following steps are the same regardless of which you use.)


3. For ALL the checkboxes/radio buttons do the following:

  • Set the boxLabel – this is used only for display.
  • Set the inputValue – this is what will be displayed in the list if the checkbox/radio button is selected.
  • Set the name – you will use this as a reference in the next steps.


4. For the first checkbox/radio button do the following:

  • Double click on the box next to the 'handler' property field to edit it. Copy the following text and paste it over what's there already:


function (me, checked){
var addr = new Array();
if(checked) addr.push(me.getEl().dom.value);
if(this.getFormField('chk2').getValue() == true) addr.push(this.getFormField('chk2').getEl().dom.value);
if(this.getFormField('chk3').getValue() == true) addr.push(this.getFormField('chk3').getEl().dom.value);
if(this.getFormField('but1').getValue() == true) addr.push(this.getFormField('but1').getEl().dom.value);
this.getFormField('list').setValue(addr.join(','));
}


The image below shows how the text should display on your screen:



  • The text in the black box tests whether this checkbox/radio button is selected – if it is, it adds it to the list.
  • The text in the red box tests whether the other checkboxes/radio buttons are selected – if they are it adds them to the list.
  • chk1, chk3, but1 are the names of the other checkboxes/radio buttons – change these to the names you have used. You can add or remove lines depending on how many checkboxes/radio buttons you have.
  • The text circled in the blue box refers to the textfield or textarea you created in step 1 – change this from list to the name of your textfield or textarea.


5. Now edit the handler field for the other checkboxes/radio buttons – all you change is one of the names in the red box, so that you don't include the name of the checkbox/radio button that you're editing.


6. Click on the preview button (the little TV-screen icon) to test your list.