Creating separated drill-down items within a text entry form | XM Community
Solved

Creating separated drill-down items within a text entry form

  • 14 June 2019
  • 5 replies
  • 103 views
R
Badge +2
TL;DR: Can you use a drill-down (not a drop-down) within a text entry form? And, if so, can those drill-down items be separated within that form? If not, what are alternative solutions?

I am trying to create a text entry form for entering and updating contact information. As part of that information, I want people to indicate what (arch)diocese they live in; however, (arch)diocese are dependent upon state and do not immediate follow state; ZIP code follows state. For example, Provo, UT 84604 is what people are familiar with, not Provo, UT Salt Lake City 84604 (where "Salt Lake City" is the diocese). Ideally, I would want respondents to be able to type in their state with an auto-complete (similar to https://www.qualtrics.com/community/discussion/12/adding-autocomplete-javascript-to-my-survey) with a list of states (this would allow for default choices to be fed in from a contact list embedded data via piped text), then based on the selected state, a list of associated (arch)diocese would be allowed to be chosen from another text entry box with auto-complete in the (arch)diocese item, which would separated by the ZIP code.

Now, an extension of the main issue are those who do not live in a US state. I would like to allow a normal text entry form box to be the drill-down option for "(arch)diocese" if respondents were to indicate they do not live in the USA.

The order and structure of the questions would look something like this:

City [Normal text entry line with default choices from contact list embedded data via piped text.]
State [Text entry line with auto-complete based on a list of states and "I live outside the USA." with default choices from contact list embedded data via piped text.]
ZIP/Postal [Text entry line, with some validations based on inside or outside USA. Input default choices from contact list embedded data via piped text.]
(Arch)Diocese [Text entry drill-down, dependent on state. Uses auto-complete. Allows for normal text entry if State = "I live outside the USA." Default choices from contact list embedded data via piped text.]
icon

Best answer by TomG 15 June 2019, 16:32

View original

5 replies

TomG
Rank
Userlevel 7
Badge +27
You can use select2 for the State and Diocese fields. Change the Diocese choices based on the State selected. Use Dynamic Option Creation (tagging) on the Diocese field to accommodate those outside the USA.

Here is an example of a text form question that uses select2 on two fields. Both are populated from a database using ajax and the second field is dependent on the first. It does NOT use the tagging function that I mentioned.
https://marketinview.ca1.qualtrics.com/jfe/preview/SV_41TwORS85XASG2N?Q_SurveyVersionID=current&Q_CHL=preview
R
Badge +2
@TomG,
Thanks. I'm teaching myself javascript and so select2 is both fascinating and overwhelming. You've led me in the right direction. I'll be able to create a solution from your example and exploring the select2 website carefully.
R
Badge +2
@TomG,
I got some JavaScript to work within a JSFiddle boilerplate (minus the dynamic tagging), but how do I get it into Qualtrics and mapped onto the appropriate lines? Would you mind sending me your .qsf file from your example? Thanks again for your help.
R
Badge +2
@TomG,
Are you referencing text entry form boxes directly and then just overlaying select2 functionality over the text box or are you actually creating dropdown lists within a form and connecting the dropdown lists via some functions and callbacks?

This is the code I have that works in JSFiddle. It utilizes HTML select boxes with dynamic option creation.

Here is it in Qualtrics. Again, I'm not sure how to properly reference a text box within a form when I've created code for dropdowns (html "select" boxes).

Qualtrics.SurveyEngine.addOnReady(function()
{
var qid = jQuery("#QR"+this.questionId);

var stateVar = qid+"-20-text";
var dioceseVar = qid+"-22-text";

var state_arr = new Array("Alabama",..."Wyoming"); // list of states and some territories

var diocese_arr = new Array();
diocese_arr[0] = "";
diocese_arr[1] = "Birmingham|Fairbanks|Mobile"; // Alabama
//... more states and territories
diocese_arr[53] = "Cheyenne"; // Wyoming

function populateDiocese(stateVarElementId, dioceseVarElementId) {
var InputState = document.getElementById(stateVarElementId).selectedIndex;
var dioceseVarElement = document.getElementById(dioceseVarElementId);
dioceseVarElement.length = 0;
dioceseVarElement.options[0] = new Option('Select (Arch)Diocese', '');
dioceseVarElement.selectedIndex = 0;
var diocese = diocese_arr[InputState].split("|");
for (var i = 0; i < diocese.length; i++) {
dioceseVarElement.options[dioceseVarElement.length] = new Option(diocese[i], diocese[i]);
}
}

function populateStates(stateVarElementId, dioceseVarElementId) {
var stateVarElement = document.getElementById(stateVarElementId);
stateVarElement.length = 0;
stateVarElement.options[0] = new Option('Select State', -1);
stateVarElement.selectedIndex = 0;
for (var i = 0; i < state_arr.length; i++) {
stateVarElement.options[stateVarElement.length] = new Option(state_arr[i], state_arr[i]);
}
if(dioceseVarElementId) {
stateVarElement.onchange = function () {
populateDiocese(stateVarElementId, dioceseVarElementId);
};
}
}
populateStates("stateVar", "dioceseVar");
$('#stateVar, #dioceseVar').select2({width: '100%', tags: true});
});

Thanks.
TomG
Rank
Userlevel 7
Badge +27
> @Ryan_W said:
> @TomG,
> Are you referencing text entry form boxes directly and then just overlaying select2 functionality over the text box or are you actually creating dropdown lists within a form and connecting the dropdown lists via some functions and callbacks?
I'm reference text entry form boxes directly and then just overlaying select2 functionality over the text box. A few things:
1. Make sure you load the full version of select2
2. Use jQuery instead of $ (e.g., jQuery("#stateVar") ).
3. Make greater use of jQuery in general (it will make it easier)
4. Make sure your data is in the correct format for select2 to use. It should be an array with objects for id and text. For example:
```
var states = [
{id: "AL", text: "Alabama"},
...
{id: "WY", text: "Wyoming"}
];
```
Then:
```
jQuery(".InputText").eq(0).select2({
data: states,
placeholder: "State"
});
```

Leave a Reply


Terms & Conditions