Hiding/Showing Text Entry Boxes on MC -- prefix and suffix issues | XM Community
Skip to main content

I am new to coding and qualtrics in general. In sort of a time crunch but slowly teaching myself the basics of html currently.
I have a survey question that consist of a single choice MC question with three choices available. Each choice has a text entry box that appears for the choice selected. A hide/show function essentially. However, I am needing to add different prefixes and suffixes for the text entry boxes like "$" and "annually". I am having an issue where the prefixes and suffixes appear before the choice is selected and the text entry box does not appear till you select the choice. Pictures below. The mobile picture at the very end also does not fit correctly. Any help is appreciated. I added my current code at the end.
Screenshot 2022-12-19 at 10.58.24 AM.png
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/
var textInputs = jQuery("#"+this.questionId+" .InputText").css("float","none");
textInputs.eq(0).before("$ ").after(" hourly");
textInputs.eq(1).before("$ ").after(" annually");
textInputs.eq(2).after(" %");

var QID= this.questionId;
    jQuery("#"+this.questionId+" inpututype='text']").attr('type', 'tel');
jQuery("#" + QID + " .InputText ").hide();
    jQuery("#" + QID + " inputntype='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("1id*='"+v1+"~TEXT']").val('');
            jQuery("rid*='"+v1+"~TEXT']").hide();
         }      
     });




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




       jQuery("#" + QID + " inputltype='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();
         }      
     });
      });


});




The HTML code is create mobile friendly view.

Please suggest me for suffix on side by side text boxes and that is also for only one text box out of all the txt boxes

 


Leave a Reply