How to display text entry box with a text on its left only when the option selected | XM Community
Skip to main content

Hi -

I’ve seen similar questions in the community but have yet to find a satisfactory answer. I’m trying to hide both the text (Please specify) and the text entry box for an MC question. Here’s an example below - 

Who helped you move?
A. Parent
B. Friend(s)
C. Spouse
D. Sibling
E. Other (Please specify:) [TEXT ENTRY BOX HERE]

I'd like the "Please specify:" text and the text entry box to only be displayed when option E is selected. Is this possible in Qualtrics?

 

I have the code to hide the text entry box until that option is selected. 

And I can hide the “Please specify” text using this in combination with the html tag

Qualtrics.SurveyEngine.addOnload(function()
{
    jQuery("#hideable-text").hide();

});

 

What I can’t figure out is how to show the “Please specify” when the option is selected. I’m sure it’s an easy fix but I don’t know enough JS to figure it out. This is what I’m using to hide the text box. I’m assuming I need to add something to this to show both the box and the “hidden” text.

Any help would be appreciated.

 

Qualtrics.SurveyEngine.addOnReady(function()
{
    var QID= this.questionId;
jQuery("#" + QID + " .InputText ").hide();
jQuery("#" + QID + " input[type='radio']").each(function(){

if(jQuery(this).prop("checked") == true)
{
var v1 = jQuery(this).attr("id");
jQuery("[id*='"+v1+"~TEXT']").show();
}
else
{
var v1 = jQuery(this).attr("id");
jQuery("[id*='"+v1+"~TEXT']").val('');
jQuery("[id*='"+v1+"~TEXT']").hide();
}
});


jQuery("#" + QID + " .Selection ").on("click change",function(){

jQuery("#" + QID + " input[type='radio']").each(function(){

if(jQuery(this).prop("checked") == true)
{
var v1 = jQuery(this).attr("id");
jQuery("[id*='"+v1+"~TEXT']").show();
}
else
{
var v1 = jQuery(this).attr("id");
jQuery("[id*='"+v1+"~TEXT']").val('');
jQuery("[id*='"+v1+"~TEXT']").hide();
}
});
});

Hi ​@ebony_haley618 this is possible. The easiest way is to wrap the “Please specify:” text in a <span> tag with an id, and then toggle its visibility along with the text box using JavaScript.

Step 1: Modify the label text like this:
<span id="please-specify-text">Please specify:</span>

So your option E should look like:
E. Other (<span id="please-specify-text">Please specify:</span>) [TEXT ENTRY HERE]

Step 2: Use this full JavaScript in the question’s “Add JavaScript” window:
Qualtrics.SurveyEngine.addOnReady(function() {
    var QID = this.questionId;

    // Hide both initially
    jQuery("#" + QID + " .InputText").hide();
    jQuery("#please-specify-text").hide();

    jQuery("#" + QID + " input[type='radio']").on("click change", function() {
        var selected = jQuery(this).prop("checked");
        var choiceText = jQuery(this).closest("li").text();

        if (selected && choiceText.includes("Other")) {
            jQuery("#" + QID + " .InputText").show();
            jQuery("#please-specify-text").show();
        } else {
            jQuery("#" + QID + " .InputText").hide().val('');
            jQuery("#please-specify-text").hide();
        }
    });
});

Let me know if it doesn’t work as expected.
-- Rochak


Hi ​@ebony_haley618,

Please let me know if the solution offered by ​@rochak_khandelwal solved your issue so I may mark it as ‘Best Answer’. It will greatly help out Community members!


This worked to hide the words “Please Specify” but not the actual box. I tried adding what I’ve already used before and it’s not working. Is there a way to combine what you have above with what I used to hide the text box? I need both the words AND the box to be hidden.

Thanks!


@ebony_haley618, The JavaScript I shared already should hide both the text and the text box. If it’s only hiding the text and not the box, it likely means the selector for the text entry box isn’t matching. Please double-check that the question type is Multiple Choice with Allow Text Entry enabled for Option E, and that you’re placing the code in the question’s JavaScript editor, not in the Look & Feel or Header.
Let me know if it’s still not working!


I have it set as a multiple choice question with the text entry box enabled. This is what it looks like. The box is still visible even though other is not selected.

This is what happens when I select other

 


@ebony_haley618, my bad. I hope changing JS in step 2 should help:

Qualtrics.SurveyEngine.addOnReady(function() {
var QID = this.questionId;

// Select the text entry box and the label span, and hide them initially
var $box = jQuery("#" + QID + " .InputText");
var $label = jQuery("#please-specify-text");
$box.hide();
$label.hide();

// Watch for changes in radio selection
jQuery("#" + QID + " input[type='radio']").on("click change", function() {
var labelText = jQuery(this).closest("li").text().trim();

if (labelText.includes("Other")) {
$box.show();
$label.show();
} else {
$box.hide().val("");
$label.hide();
}
});
});



So let me know.


Nope still not working.

 


This works to hide the box. Can something be added to this to also hide the words “Please Specify”

 

Qualtrics.SurveyEngine.addOnReady(function()
{
    var QID= this.questionId;
jQuery("#" + QID + " .InputText ").hide();
jQuery("#" + QID + " input[type='radio']").each(function(){

if(jQuery(this).prop("checked") == true)
{
var v1 = jQuery(this).attr("id");
jQuery("[id*='"+v1+"~TEXT']").show();
}
else
{
var v1 = jQuery(this).attr("id");
jQuery("[id*='"+v1+"~TEXT']").val('');
jQuery("[id*='"+v1+"~TEXT']").hide();
}
});


jQuery("#" + QID + " .Selection ").on("click change",function(){

jQuery("#" + QID + " input[type='radio']").each(function(){

if(jQuery(this).prop("checked") == true)
{
var v1 = jQuery(this).attr("id");
jQuery("[id*='"+v1+"~TEXT']").show();
}
else
{
var v1 = jQuery(this).attr("id");
jQuery("[id*='"+v1+"~TEXT']").val('');
jQuery("[id*='"+v1+"~TEXT']").hide();
}
});
});


I just checked. The initial code is working for me!

Here are the screenshots!

 

Label text modification
Question JS
Before selecting other


 

After selecting other



I think this should clarify. Do let me know.


Still not working but thanks for your help.


Here is an alternative that can place the text entry box next to the choice text, hide text entry boxes for unselected choices, and some other things.