How can I put a drop-down list in a form question field? | XM Community
Skip to main content
Hello Everybody!!

We need to launch a survey for updating customers´ data, so we need to make them to select which of the 3 types of document do they have, and this is just one of the field from the form and we don´t want to make an additional question for this.



I want to put the dropdown list in the yellow field:

!



Thanks for helping me!!! 😎 😎 😘 😘
This QSF file should help you set it up.
Thanks so much David!!! That´s exactly what I needed!!!

SUPER GENIUS!! 😎 😎

Greetings from Colombia - Vocé!
Hey both,



just found this thread here, superhelpfull! So thanks also from my side 🙂 @uhrxx005: any chance you can also help me with this one? The width of the dropdown box is now smaller than the other ones. Do you know nhow i can adjust/ align the width of all answer boxes (incl. the drop-down) so that they're all the same widht (let's say 200 ptx :))?



Thanks,

Johannes

Hi, what do i do with the QSF file? Sorry, new to Qualtrics 🙂 I need to add a drop down list to a form question as well. please help!


Never mind, figured it out! :)


Great solution! I adapted this code to fit a use case that uses a constant sum w/total.
I was wondering if there is a way to retain the user's choice after a validation error message is presented?
For ex: There are 2 boxes and a total field, the validation is set such that the total must be equal to a 100.
If box 1 equals 50, box 2 equals 10, the validation fails and the user's choices are reset to null. Is there a way to retain their choices if the validation fails?


Thanks for providing the QSF file uhrxx005. Super helpful. Quick follow-up question. What part of the code do you modify to change which response option has the dropdown menu? I'm not a coder and am having a little trouble identifying the change required.


I have a follow up on this - it seems that once the page containing the form/drop down question is submitted, the selection disappears. If using a back button, or even on a summary page at the end of the survey, these lines are blank. How do I keep them without using embedded data? (i.e. it needs to populate on the summary page)


https://www.qualtrics.com/community/discussion/comment/26473#Comment_26473dkennedy this is code I'm using; the highlighted portions are where the drop down options are declared.
image.png


dkennedy sorry, misread your question. The .InputText:eq(1) indicates the SECOND item on the form to have the dropdown; likewise the (2) indicates the THIRD item on the form. Be sure to also indicate with the S1 and S2 you see throughout the code, as well.


https://www.qualtrics.com/community/discussion/comment/18149#Comment_18149Hi uhrxx005 thanks very much for the file. I've discovered a problem however in that when you have a validation on the page (it can be another question or the same), when the validation message appears, the page is refreshed (perhaps redrawn) but the selection is then lost in the field that you have the drop down associated with.

This pic shows that in your example file I've placed a validation on Field 2.
image.png I complete Field 3 using the drop down .
image.pngThe I click next
image.pngYou can see that the entry in Field 3 has disappeared.
Hope you can help with a fix. I've tried to work out if it's possible to check if the original text box is populated already and if so select the entry in the drop down but my javascript is not good enough to figure that out and also I'm wondering if that might cause some sort of circular reference.

Hope you can help

Thanks

Rod Pestell


Rod_Pestell , I initially got this code from someone else and I personally do not know how to program so I won't be able to help you with this. I would recommend posting the code in the Developer Corner and see if anyone there can help you modify it to accommodate the validation.


Hi uhrxx005 , thanks for the reply. I'll reach out to someone in the forum then. Out of interest, was the source from another website, if so please could yo share that with me as it might be best to talk to the person you got the code from in the first place.
Thanks

Rod


Hi uhrxx005 , thanks a lot for your answer. It helped me a lot.
I'm also trying to prepare a question in a format similar to this. There is one text entry and two drop down lists for the dates. Do you have a code where I can put dates in drop down lists (from 1950 to 2021 and end year should be greater than start year)? I tried this solution but it didn't work for me. Thanks a lot.
1.jpg


Thank you for the thread! This was most informative.


Great thread, thank you all, specially uhrxx005
I was trying to put a list of countries in one of those drop-down menus, and I am trying to avoid the manual option of writing one by one as var element option1, option2, etc...
I found this nice piece of code online, but I can't make it work in the Qualtrics environment.
Any clue, please?
Thanks


I am newbie. I too want to create a formfield which has a dropdown list. I see that there is some code in this thread which seemed to have worked for everyone. My question - How do I open the QSF file and how do I use it?


Hi desirazun ,
You create a new survey project and at the beginning you will be given the option to use use / upload a .qsf file. That then creates the survey with the question in which has hopefully what you need to get started.
Good luck
Thanks
Rod Pestell


Thank you Rod_Pestell


Rod_Pestell I get the following error - You do not have permission to use JavaScript in the survey editor.
Can you help me with this.
Thanks


Sounds like Javascript needs to be enabled for your account or in the survey or something. You might have to reach out to Qualtrics support for that. It will be a setting in the user type no doubt but it might also depend on you level of account.


OK Thanks.


I created a form field that is using javascript from the community link below. It is working great when I tested it on the original question (meaning the options show up and I can select the right ones). I am re-using this question multiple times in the survey and so I just duplicated the question (which also worked great to display the response).
When I checked the response data I noticed that the additional questions are displaying what was recorded in the 1st question and not in the subsequent responses. (i.e. I select age of child 1 (1st question)=10, 2nd child (2nd question)=15. The fields generate the correct answers in the survey, but the response data in Data & Analysis only shows age=10 for both child 1 & 2.
These are all listed on the same page and expand from child 1 up to child 10 (depending on how many children the person selected in previous question)
I assume there is something I need to change for each question so that the response data, piped text, and future embedded data knows what was in the field of each question and doesn't reference the 1st response choices. I'm still a pretty new person to javascript, so any guidance would be appreciated. Thanks.


Got it figured out....Looks like I needed to change the variable names s1, s2, s3, etc. and just continue the numbering of each one on each question.


This code works beautifully!
I am wondering if it is possible to combine this with some code for a default choice based on an embedded data field?
For example, the code below works for a a standard drop-down question:
Qualtrics.SurveyEngine.addOnReady(function()
{
/*Adds default to dropdown question choice based on embedded field*/
var select = jQuery("#"+this.questionId+" select");
if("${e://Field/track}" == "Alt 1") select.val("1");
if("${e://Field/track}" == "Alt 2") select.val("2");
if("${e://Field/track}" == "Alt 3") select.val("3");
if("${e://Field/track}" == "Alt 4") select.val("4");
if("${e://Field/track}" == "Alt 5") select.val("5");

});

Would there be a way to combine it with the code to add a dropdown to a form question? (I am adding the code shared in this thread below for convenience so people don't have to download and import the qsf file)
Qualtrics.SurveyEngine.addOnReady(function()
{
/*Creates dropdown lists for form text entry boxes*/
var that=this.questionId;
var element="";
  jQuery(element).insertAfter("#"+that+" .InputText:eq(2)");

  jQuery("#"+that+" .InputText:eq(2)").hide();
  jQuery("#"+that+" .InputText:eq(2)").val(jQuery("#s1 option:selected").text());

  jQuery("#s1").on('change',function(){
  jQuery("#"+that+" .InputText:eq(2)").val(jQuery("#s1 option:selected").text());
  });

});

Any help is much appreciated!


Leave a Reply