Community Groups are officially here!
We've released Groups, a new feature that enables us to connect community members of similar industries and interests in a shared, private space. You can check out all of the details here, including information about who can join, how to join, and what Groups are currently offered. Please leave your feedback through this Community Groups Feedback Survey.

How to add a drop down list next to a free text entry?

Avavava
Avavava Community Member - Trial User Qubie ✭
edited July 30 in Custom Code

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.

Best Answers

  • ahmedA
    ahmedA IndiaCommunity Member, XMPN Member Wizard ✭✭✭✭✭
    Accepted Answer

    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", '<input type="text" id="input_value">');
    	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","<span>&nbsp;&nbsp;&nbsp;</span>");
    	}
    		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.

  • ahmedA
    ahmedA IndiaCommunity Member, XMPN Member Wizard ✭✭✭✭✭
    Accepted Answer

    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

Answers

  • Avavava
    Avavava Community Member - Trial User Qubie ✭
    edited January 24

    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?


  • Avavava
    Avavava Community Member - Trial User Qubie ✭

    Ah I understand now. Thank you very much!

  • Javier_de_la_Osa
    Javier_de_la_Osa SpainCommunity Member Qubie ✭

    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?