How to display text entry box with a text on its left only when the option selected

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!

 

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.