Thomas Gibbons Consulting Qualtrics Wiki

Contact TomG on Qualtrics Community

User Tools

Site Tools


formselects

formSelects - Convert form fields to dropdowns without custom JavaScript

The formSelects function converts one or more text form fields into selects (aka dropdowns) or searchable selects. The select options (aka choices) are defined using html in the choice text and question text, so no custom JavaScript is required…just call the formSelects function and that's it!

Features include:

  • All configuration done using html - no custom JavaScript needed!
  • Optional searchable selects using select2
  • Optional dynamic option creation using select2
  • Supports multi-selects
  • Supports back button - even when dynamic options are created
  • Supports default choices
  • Translation friendly

Here is a quick video demonstration:

This function is available for a reasonable fee. Contact TomG on the Qualtrics Community to learn more.

Set-up Instructions

Survey Header

Add select2 (if applicable)

If you wish to use searchable selects add the select2 stylesheet and library to the survey header. Go to Look & Feel → General → Header edit → and paste:

<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>

Add formSelects Function

Add the formSelects function to the survey header to make it available to any question in the survey. Go to Look & Feel → General → Header edit → and paste the provided formSelects function JS:

<script>/*Paste formSelects function JS here*/</script>

Alternatively, paste the formSelects function JS into a question's JS outside the existing Qualtrics functions to make it available to questions on the page.

Question JavaScript

Add JS to call the formSelects function to apply it to a form question as follows:

Qualtrics.SurveyEngine.addOnload(function() {
	formSelects(this);
});

QuestionText Select HTML

In HTML View mode, add the html for the select(s). Each select should be assigned a unique class name that will be referenced in the corresponding Choice Label HTML. To make a select a multi-select add the attribute multiple="multiple" to the <select> tag. Additional attributes (e.g., style) may be added to the <select> tag as needed.

value attributes are NOT required in the select’s option tags. If value attributes are used, the value will be saved in Qualtrics instead of the option text. If dynamic option creation (i.e., select2 tags) is being used, the value attribute should not be used.

Example select HTML:

<select class="states">
<option></option>
<option>Alabama</option>
<option>Alaska</option>
<option>Arizona</option>
...
<option>West Virginia</option>
<option>Wisconsin</option>
<option>Wyoming</option>
</select>

Choice Label HTML

data-select

To convert a field to a select put the choice label inside a <span> tag with the attribute data-select="classname" where classname matches the class of a select tag in the QuestionText Select HTML. For example:

<span data-select="states">State</span>

data-select2

To make the select a searchable select (i.e., select2) using the default options, add the attribute data-select2. For example:

<span data-select="states" data-select2>State</span>

To add select2 options, add the options to the data-select2 attribute as an object. For example:

<span data-select="states" data-select2='{"placeholder":"Select a state","tags":true}'>State</span>

data-join

When a multi-select dropdown is used, the choices must be joined together into a single string to save them in the text form field. By default the choices are joined with “, ” (comma+space). To join using a different string, add a data-join attribute with the value of the join string. For example:

<span data-select="states" data-select2 data-join="|">State</span>

Qualtrics Wiki

formselects.txt · Last modified: 2023/10/05 07:31 by admin

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki