Adding an "Other" Text Box to Dropdown Fields

Brittany De Gail

Updated April 25, 2024 12:12

You can configure any dropdown field used on your web forms to contain an "Other" option that will display an "Other" text box input when selected, allowing the user to enter a custom value for the field not included in the dropdown menu options. For example, you can configure this option for the Status dropdown field used on the User Registration and Change User Information forms to allow users to enter a custom status that will be saved to their user record when the form is submitted. To configure this option for your dropdown field, follow the implementation steps below.

Implementation Steps

Open the HTML file for the form on which the dropdown field is located in a text editing application such as Notepad++ or within the GitHub editor, then locate the code used for the dropdown field in the file

Add code for an "Other" text box input field below the code for the dropdown field following the example for the default "Status" dropdown field below. The <input> element for the "Other" text box code should have the same name and id attribute values as those used in the <select> element in the code for the dropdown field, the same for attribute value in the <label> element, the same name attribute value in the <#ERROR> tag, and the same name attribute value in the <#PARAM> tag:

You can modify the "Other" text in the code below to change the label used for the field on the web form. For example, you can change this to "Other (please specify)" or to any other value you want displayed to the user as the name for the text box on the form.

<div class="form-group col-md-4">
    <label for="Status">
        <span class="<#ERROR name='ERRORStatus'>">
            Status
            <span class="req">(required)</span>
        </span>
    </label>
    <select class="custom-select mr-sm-2" 
     name="Status" id="Status" required>
        <#OPTION name="Statuses" selectedValue="<#PARAM name='Status'>" 
         defaultName="Choose a Status" defaultValue="">
    </select>
</div>

<div class="form-group col-md-4">
    <label for="Status">
        <span class="<#ERROR name='ERRORStatus'>">
            Other
        </span>
    </label>
    <input type="text" class="form-control" name="Status" id="Status" 
     value="<#PARAM name='Status'>">
</div>

Once the "Other" text box code is configured, adjust the id and name attribute values in the code for the dropdown field's <select> element to unique values by appending "-dropdown" to each value:

<div class="form-group col-md-4">
    <label for="Status">
        <span class="<#ERROR name='ERRORStatus'>">
            Status
            <span class="req">(required)</span>
        </span>
    </label>
    <select class="custom-select mr-sm-2" 
     name="Status-dropdown" id="Status-dropdown" required>
        <#OPTION name="Statuses" selectedValue="<#PARAM name='Status'>" 
         defaultName="Choose a Status" defaultValue="">
    </select>
</div>

<div class="form-group col-md-4">
    <label for="Status">
        <span class="<#ERROR name='ERRORStatus'>">
            Other
        </span>
    </label>
    <input type="text" class="form-control" name="Status" id="Status" 
     value="<#PARAM name='Status'>">
</div>

Additional Changes Required for Custom Fields

If the dropdown field is a custom field defined in the CustomFieldDefinitions table, you will also need to remove the 'CustomFields' prefixes from the name and id attributes in the dropdown's <select> element.

For example, for a custom dropdown field configured with the short name "Color," you would change the code for the <select> element from this:

<select class="custom-select mr-sm-2" name="User.CustomFields.Color"
id="CustomFields.Color">

To this:

<select class="custom-select mr-sm-2" name="Color-dropdown"
id="Color-dropdown">

Change the for attribute value used in the <label> element for the dropdown field to match the new id attribute value used in the <select> element:

<div class="form-group col-md-4">
    <label for="Status-dropdown">
        <span class="<#ERROR name='ERRORStatus'>">
            Status
            <span class="req">(required)</span>
        </span>
    </label>
    <select class="custom-select mr-sm-2" 
     name="Status-dropdown" id="Status-dropdown" required>
        <#OPTION name="Statuses" selectedValue="<#PARAM name='Status'>" 
         defaultName="Choose a Status" defaultValue="">
    </select>
</div>

<div class="form-group col-md-4">
    <label for="Status">
        <span class="<#ERROR name='ERRORStatus'>">
            Other
        </span>
    </label>
    <input type="text" class="form-control" name="Status" id="Status" 
     value="<#PARAM name='Status'>">
</div>

Add the "dropdown-with-other" CSS class to the <select> element as shown below:

<div class="form-group col-md-4">
    <label for="Status-dropdown">
        <span class="<#ERROR name='ERRORStatus'>">
            Status
            <span class="req">(required)</span>
        </span>
    </label>
    <select class="custom-select mr-sm-2 dropdown-with-other" 
     name="Status-dropdown" id="Status-dropdown" required>
        <#OPTION name="Statuses" selectedValue="<#PARAM name='Status'>" 
         defaultName="Choose a Status" defaultValue="">
    </select>
</div>

<div class="form-group col-md-4">
    <label for="Status">
        <span class="<#ERROR name='ERRORStatus'>">
            Other
        </span>
    </label>
    <input type="text" class="form-control" name="Status" id="Status" 
     value="<#PARAM name='Status'>">
</div>

Add matching data-field-name attributes to the <select> element used for the dropdown field and to the <input> element used for the "Other" text box. The value used in the data-field-name attributes can be anything as long as they match. For consistency, it is recommended to use the database name of the field for default Aeon fields and the field's short name for custom Aeon fields:

<div class="form-group col-md-4">
    <label for="Status-dropdown">
        <span class="<#ERROR name='ERRORStatus'>">
            Status
            <span class="req">(required)</span>
        </span>
    </label>
    <select class="custom-select mr-sm-2 dropdown-with-other" 
     name="Status-dropdown" id="Status-dropdown" data-field-name="Status" required>
        <#OPTION name="Statuses" selectedValue="<#PARAM name='Status'>" 
         defaultName="Choose a Status" defaultValue="">
    </select>
</div>

<div class="form-group col-md-4">
    <label for="Status">
        <span class="<#ERROR name='ERRORStatus'>">
            Other
        </span>
    </label>
    <input type="text" class="form-control" name="Status" id="Status" 
     value="<#PARAM name='Status'>" data-field-name="Status">
</div>

Finally, you must add an "Other" option to the dropdown field that will trigger the text box to display when that option is selected, using one of the two methods below:

If the dropdown field code uses the <#OPTION> tag to automatically populate the dropdown options from a group defined in the Aeon Customization Manager's CustomDropDown table, then you can create an "Other" option for that group in the CustomDropDown table. Once this option is configured in the table, add a data-other-value attribute to the dropdown field's <select> element that contains the value you configured in the Label Value column for the "Other" option in the CustomDropDown table:

CustomDropDown Status Group Other Option.png

<div class="form-group col-md-4">
    <label for="Status-dropdown">
        <span class="<#ERROR name='ERRORStatus'>">
            Status
            <span class="req">(required)</span>
        </span>
    </label>
    <select class="custom-select mr-sm-2 dropdown-with-other" 
     name="Status-dropdown" id="Status-dropdown" data-field-name="Status" 
     data-other-value="Other" required>
        <#OPTION name="Statuses" selectedValue="<#PARAM name='Status'>" 
         defaultName="Choose a Status" defaultValue="">
    </select>
</div>

<div class="form-group col-md-4">
    <label for="Status">
        <span class="<#ERROR name='ERRORStatus'>">
            Other
        </span>
    </label>
    <input type="text" class="form-control" name="Status" id="Status" 
     value="<#PARAM name='Status'>" data-field-name="Status">
</div>

If your dropdown options are hardcoded on the web form or you do not want to add an "Other" option to the CustomDropDown table, then the "Other" option can also be hardcoded directly in the code for the dropdown field, as shown below. In this case, add a data-other-value attribute to the <select> element for the dropdown field with a value matching that used in the value attribute for the hardcoded "Other" option:

<div class="form-group col-md-4">
    <label for="Status-dropdown">
        <span class="<#ERROR name='ERRORStatus'>">
            Status
        <span class="req">(required)</span>
        </span>
    </label>
    <select class="custom-select mr-sm-2 dropdown-with-other" 
     name="Status-dropdown" id="Status-dropdown" data-field-name="Status" 
     data-other-value="Other" required>
        <#OPTION name="Statuses" selectedValue="<#PARAM name='Status'>" 
         defaultName="Choose a Status" defaultValue="">
        <option value="Other">Other</option>
    </select>
</div>

<div class="form-group col-md-4">
    <label for="Status">
        <span class="<#ERROR name='ERRORStatus'>">
            Other
        </span>
    </label>
    <input type="text" class="form-control" name="Status" id="Status" 
     value="<#PARAM name='Status'>" data-field-name="Status">
</div>

Save and test your changes to ensure the "Other" text box has been properly configured on the form.

Implementation Steps

Articles in this section