How can I hide/unhide and/or reposition the text entry box for a multiple choice response? | Experience Community
Skip to main content

How can I hide/unhide and/or reposition the text entry box for a multiple choice response?

  • March 16, 2022
  • 4 replies
  • 1372 views
N
Forum|alt.badge.img+1

I have several multiple choice questions (some multiple choice, some single choice) for which I have an "other" response, with a text entry required.
However, I hate that the text box is displayed below the "other" selectable option, and screws up spacing, especially if I'm using columns for the multiple choice options.
It would also be nice to only display the text box if the "other" option is selected, and hide it if it is not.
In the example below, you can see that the spacing in the left column between "Designer" and "Front-End Architect" is wider than the spacing between the items above these options - presumably because the "other" text box is below the "other" label on the same row in the right column. If I could pull the text box up to the right of "other" label, rather than having it below it, that would possibly solve the spacing issue. Additionally, I don't want the "other" text box to display if "other" has not been selected - I do want it to display if/when they check "other", however.
image.pngDoes anyone know if/how I can accomplish this?

4 replies

Aanurag_QC
QPN Level 5 ●●●●●
Forum|alt.badge.img+31

You can use the below code to hide the text box and should only appear when someone selects other

Qualtrics.SurveyEngine.addOnload(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();
     }    
   });
   });

 

});
Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/

});

Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/

});

    N
    Forum|alt.badge.img+1
    • NateC
    • Author
    • March 17, 2022

    https://community.qualtrics.com/XMcommunity/discussion/comment/44641#Comment_44641Thanks Aanurag. Unfortunately, when I use the code you provided, the box does not appear when I click on "other". :-(

    Aanurag_QC
    QPN Level 5 ●●●●●
    Forum|alt.badge.img+31

    Are you using a single choice or multi choice question?

      N
      Forum|alt.badge.img+1
      • NateC
      • Author
      • March 17, 2022

      Both actually. It's not working in either. It doesn't appear to work if I'm using columns (for either single or multi-select).
      I edited the script (replaced "radio" with "checkbox") for my multi-select questions. It works if I don't have the checkboxes in columns. But if I use columns it fails to work.

      Terms & ConditionsAccessibility statement