How to Include a drop-down list within a form field question type | XM Community
Solved

How to Include a drop-down list within a form field question type

Ricmarug
Rank
Userlevel 4
Badge +16

Hello!

I have a form field question and I need one of those fields to be a drop-down list with 5-7 options. 
I searched in other posts and the one that has the most interactions is this one but the QSF from the best answer is not there anymore, so I found no clear solution for this issue. 

Thanks in advance for the help!

icon

Best answer by Tom_1842 7 July 2023, 20:52

View original

12 replies

TusharDalwani
Rank
Userlevel 5
Badge +26

Hello!

I have a form field question and I need one of those fields to be a drop-down list with 5-7 options. 
I searched in other posts and the one that has the most interactions is this one but the QSF from the best answer is not there anymore, so I found no clear solution for this issue. 

Thanks in advance for the help!

Hello Ricardo, If it is possible to use Multiple Text entry questions instead of 1 Form Field question, you will be able to use the autocomplete feature available. 

 

 

~Tushar Dalwani
Ricmarug
Rank
Userlevel 4
Badge +16

Hello @TusharDalwani!

Thank you for your response. 

In this case we need a form field because we have around 8 fields that the user has to fill, in this scenario, 8 individual text entry questions would use a lot of space. 

 Also we have around 10 similar surveys that my team have to build, so using this aproach would be very time consuming. 

Tom_1842
Rank
Userlevel 7
Badge +27

Hi, I went through that thread and made a couple tweaks to the solution I found in one of the comments there. The idea is that an input field is hidden and a select element is inserted in its place. Then the text value of whatever is selected gets set as the value for the hidden input field.

To give it a try, create a Form Field question type and give it 3 fields. Then to change the 3rd field into a dropdown with 5 answer options, add the below to the question's JavaScript in the OnReady section:

var that=this.questionId;
var pipe3 = this.getTextValue(3);
var element="<select id='s3'><option></option><option value='Entry 1'>Entry 1</option><option value='Entry 2'>Entry 2</option><option value='Entry 3'>Entry 3</option><option value='Entry 4'>Entry 4</option><option value='Entry 5'>Entry 5</option></select>";
jQuery(element).insertAfter("#"+that+" .InputText:eq(2)");

jQuery("#"+that+" .InputText:eq(2)").hide().val(pipe3);
jQuery("#s3").val(pipe3);

var select3 = document.getElementById("s3");
select3.addEventListener('input', function (event) {
jQuery("#"+that+" .InputText:eq(2)").val(jQuery("#s3 option:selected").text());
}, false);

You might also check out using select2 to make searchable dropdowns. There’s a post on it here. Just remove the parts about multiple: true and make some of the tweaks I made above with pipe3 to support the back button.

Ricmarug
Rank
Userlevel 4
Badge +16

Hello @Tom_1842!

It worked perfectly! thank you :D 

Something else (that now I see that I should have added to the question 😅) we also need to show/hide some of the options with display logics. But when I do that, the drop down list is not hided, it is just added to the third option. Here an example: 

I put the logic to Field 3 and when the logic is met, this is what I see: 

But when the logic is not met, this is what I see: 

Field 3 is not shown but the drop-down list is appliet to Field 4. 

Also, when I respond the survey the drop-down values are assigned to the question that it is related to in each scenario. 

Is there a way to fix this? 

Thanks!

Tom_1842
Rank
Userlevel 7
Badge +27

Try using the below instead. It selects the form to be hidden based on ID instead of index of InputText.

var that=this.questionId;
var form3 = document.getElementById("QR~"+that+"~3");
var pipe3 = this.getTextValue(3);
var element="<select id='s3'><option></option><option value='Entry 1'>Entry 1</option><option value='Entry 2'>Entry 2</option><option value='Entry 3'>Entry 3</option><option value='Entry 4'>Entry 4</option><option value='Entry 5'>Entry 5</option></select>";
jQuery(element).insertAfter(form3);

jQuery(form3).hide().val(pipe3);
jQuery("#s3").val(pipe3);

var select3 = document.getElementById("s3");
select3.addEventListener('input', function (event) {
jQuery(form3).val(jQuery("#s3 option:selected").text());
}, false);

 

TomG
Rank
Userlevel 7
Badge +27

@Ricmarug,

You might be interested in the formSelects function.  It makes it very easy to convert form fields to drop downs without custom JavaScript.  It supports multiple dropdowns in a form, searchable dropdowns (select2), user entered options, and multi-select dropdowns.

Ricmarug
Rank
Userlevel 4
Badge +16

Thank you very much, @Tom_1842. It worked perfectly!!

Best regards, 

N
Badge

Hi @Tom_1842 - This is quite cool! A follow-up question - 

Say we want to replicate the same dropdown options in all 3 form fields, how would the code change? I tried something but seem to be woefully offbase 😅

 

Hi, I went through that thread and made a couple tweaks to the solution I found in one of the comments there. The idea is that an input field is hidden and a select element is inserted in its place. Then the text value of whatever is selected gets set as the value for the hidden input field.

To give it a try, create a Form Field question type and give it 3 fields. Then to change the 3rd field into a dropdown with 5 answer options, add the below to the question's JavaScript in the OnReady section:

var that=this.questionId;
var pipe3 = this.getTextValue(3);
var element="<select id='s3'><option></option><option value='Entry 1'>Entry 1</option><option value='Entry 2'>Entry 2</option><option value='Entry 3'>Entry 3</option><option value='Entry 4'>Entry 4</option><option value='Entry 5'>Entry 5</option></select>";
jQuery(element).insertAfter("#"+that+" .InputText:eq(2)");

jQuery("#"+that+" .InputText:eq(2)").hide().val(pipe3);
jQuery("#s3").val(pipe3);

var select3 = document.getElementById("s3");
select3.addEventListener('input', function (event) {
jQuery("#"+that+" .InputText:eq(2)").val(jQuery("#s3 option:selected").text());
}, false);

You might also check out using select2 to make searchable dropdowns. There’s a post on it here. Just remove the parts about multiple: true and make some of the tweaks I made above with pipe3 to support the back button.

 

Tom_1842
Rank
Userlevel 7
Badge +27

@ninadas Try creating a new Form Field question that has 3 fields. Then add the below to the OnReady section of the question’s JavaScript:

var qid=this.questionId;

var form1 = document.getElementById("QR~"+qid+"~1");
var pipe1 = this.getTextValue(1);
var form2 = document.getElementById("QR~"+qid+"~2");
var pipe2 = this.getTextValue(2);
var form3 = document.getElementById("QR~"+qid+"~3");
var pipe3 = this.getTextValue(3);

var element1="<select id='s1'><option></option><option value='Entry 1'>Entry 1</option><option value='Entry 2'>Entry 2</option><option value='Entry 3'>Entry 3</option><option value='Entry 4'>Entry 4</option><option value='Entry 5'>Entry 5</option></select>";

var element2="<select id='s2'><option></option><option value='Entry 1'>Entry 1</option><option value='Entry 2'>Entry 2</option><option value='Entry 3'>Entry 3</option><option value='Entry 4'>Entry 4</option><option value='Entry 5'>Entry 5</option></select>";

var element3="<select id='s3'><option></option><option value='Entry 1'>Entry 1</option><option value='Entry 2'>Entry 2</option><option value='Entry 3'>Entry 3</option><option value='Entry 4'>Entry 4</option><option value='Entry 5'>Entry 5</option></select>";

jQuery(element1).insertAfter(form1);
jQuery(element2).insertAfter(form2);
jQuery(element3).insertAfter(form3);

jQuery(form1).hide().val(pipe1);
jQuery("#s1").val(pipe1);
jQuery(form2).hide().val(pipe2);
jQuery("#s2").val(pipe2);
jQuery(form3).hide().val(pipe3);
jQuery("#s3").val(pipe3);

var select1 = document.getElementById("s1");
var select2 = document.getElementById("s2");
var select3 = document.getElementById("s3");

select1.addEventListener('input', function (event) {
jQuery(form1).val(jQuery("#s1 option:selected").text());
}, false);

select2.addEventListener('input', function (event) {
jQuery(form2).val(jQuery("#s2 option:selected").text());
}, false);

select3.addEventListener('input', function (event) {
jQuery(form3).val(jQuery("#s3 option:selected").text());
}, false);

 

N
Badge

Thank you so much, @Tom_1842 ! This worked well!

G
Badge

Hello @Tom_1842 ,

I recently added a drop down to a form field question in my Qualtrics with minor adjustments to fit our use case. It worked perfectly for the last month or so but today I received a “We were unable to connect to our servers. Please check your internet connection and try again.” Qualtrics support center believes that something with my Java Script has been done in error but cannot provide any guidance on how to troubleshoot. I am unsure why today it would stop working when I have been using it for some time. Anyone have thoughts on why this may be the case? 

Thanks in advance for the guidance!

A
Badge

Hello!

I have a form field question and I need one of those fields to be a drop-down list with 5-7 options. 
I searched in other posts and the one that has the most interactions is this one but the QSF from the best answer is not there anymore, so I found no clear solution for this issue. 

Thanks in advance for the help!

Hello! I am unable to use the javascript for a dropdown field in formfield this is my first time using javascript how can i know if my javascript is working I don’t see any changes after pasting the given code above can someone please explain if any changes to be made in javascript code  with example. Thanks in Advance

Leave a Reply


Terms & Conditions