Hello,
I would appreciate anyone's help with this. I want to add a drop down list next to a free text entry answer. To give more context, I want the responders to type in a numerical value in either "mmol/l" or "mg/dl" (of their choosing in the drop down list. Responders will use different units depending on their geographical location). Would this be possible on the survey? Thanks in advance.
Solved
How to add a drop down list next to a free text entry?
Best answer by ahmedA
There are two ways in which you can approach this. One is to create a dropdown question and add a text box via JS. You'll need to store the value in the text box as an embedded variable. This will be the code for it:
Qualtrics.SurveyEngine.addOnReady(function(){
this.getQuestionContainer().querySelector("select").parentElement.insertAdjacentHTML("afterbegin", '');
document.querySelector("#NextButton").onclick = function () {
input_value = document.getElementById("input_value").value;
Qualtrics.SurveyEngine.setEmbeddedData("input_value", input_value);
}
});
Alternatively, you could create a multiple choice single answer question with your units as choices and then use JS to switch the positions. This will be the code for it:
Qualtrics.SurveyEngine.addOnload(function(){
x = this.getQuestionContainer().querySelectorAll(".LabelWrapper");
x.forEach(item => {
try{
item.insertAdjacentElement("afterbegin",item.children[1]);
item.children[0].style.width = "60px";
item.parentElement.children[1].hide();
item.children[0].insertAdjacentHTML("afterend"," ");
}
catch(err){
item.parentElement.children[1].remove();
item.parentElement.children[1].remove();
}
});
});
Qualtrics.SurveyEngine.addOnReady(function(){
that = this;
this.getQuestionContainer().querySelectorAll(".TextEntryBox").forEach(item => {
item.oninput = function () {clear_others(item.id)}
});
function clear_others(el){
curr_sel = el.split('~')[2];
that.getQuestionContainer().querySelectorAll(".TextEntryBox").forEach(item => {
if(item.id.split("~")[2] != curr_sel){
item.value = "";
}
});
}
});
The demo for both of them is here. The later option, even though it uses more JS, will provide results, in my opinion, that are more easy to deal with.
There are two ways in which you can approach this. One is to create a dropdown question and add a text box via JS. You'll need to store the value in the text box as an embedded variable. This will be the code for it:
Qualtrics.SurveyEngine.addOnReady(function(){
this.getQuestionContainer().querySelector("select").parentElement.insertAdjacentHTML("afterbegin", '');
document.querySelector("#NextButton").onclick = function () {
input_value = document.getElementById("input_value").value;
Qualtrics.SurveyEngine.setEmbeddedData("input_value", input_value);
}
});
Alternatively, you could create a multiple choice single answer question with your units as choices and then use JS to switch the positions. This will be the code for it:
Qualtrics.SurveyEngine.addOnload(function(){
x = this.getQuestionContainer().querySelectorAll(".LabelWrapper");
x.forEach(item => {
try{
item.insertAdjacentElement("afterbegin",item.children[1]);
item.children[0].style.width = "60px";
item.parentElement.children[1].hide();
item.children[0].insertAdjacentHTML("afterend"," ");
}
catch(err){
item.parentElement.children[1].remove();
item.parentElement.children[1].remove();
}
});
});
Qualtrics.SurveyEngine.addOnReady(function(){
that = this;
this.getQuestionContainer().querySelectorAll(".TextEntryBox").forEach(item => {
item.oninput = function () {clear_others(item.id)}
});
function clear_others(el){
curr_sel = el.split('~')[2];
that.getQuestionContainer().querySelectorAll(".TextEntryBox").forEach(item => {
if(item.id.split("~")[2] != curr_sel){
item.value = "";
}
});
}
});
The demo for both of them is here. The later option, even though it uses more JS, will provide results, in my opinion, that are more easy to deal with.
Thank you so much for your time and response. It's exactly as I have described it! However, for some reason when I type in the value into the free text box, the number disappears in the summary page and is only left with the dropdown selection. Can this be something that can be fixed? 
It won't come in the summary page, because we are adding the text box later. That's why we need to store it as an embedded variable.
Create your own block and use the code. The value will be present as an embedded variable in the results. Just make sure you create an embedded data variable in the survey flow called input_value
Hi, I´ve tried to replicate the code and everything you said here but I can´t make work the second option that it´s the one I need, text box and dropdown next to it.
I selected Multiple Choice -> Allow one answer. I´ve inserted the options (6 in total) and then I pasted the second part of the code onto the Javascript of the question but when I previewed the question nothing is displayed only the question name. 
Could you help to find my error and make it work please?
Hi,
I have tried to use your first line of code (so add textboxes to a dropdown question), but I want to do that for more options. With this code, I can only seem to add a text box after 1 dropdown menu. I have 5. How do I solve this?
Thanks!
ahmedA - is it possible to modify the dropdown text box option you suggested to only allow number entry? I used the following solution which appears to work on desktop but not mobile:
Qualtrics.SurveyEngine.addOnReady(function(){
this.getQuestionContainer().querySelector("select").parentElement.insertAdjacentHTML("afterbegin", '');
document.querySelector("#NextButton").onclick = function () {
input_value = document.getElementById("input_value").value;
Qualtrics.SurveyEngine.setEmbeddedData("input_value", input_value);
}
Thank you for your help!
Hi, I don’t know if this helps anyone but I will upload it incase. I wanted to select options from a drop-down list, whilst also allowing a free response not listed. To do this the question type must be text entry and under text type (single/multiple) it will have a manage autocomplete option.
This will open a box that should allow you to upload your required drop down list. Under that there will be a option to ‘Allow free response’, have this selected.
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.