How to add label before/after text entry boxes | XM Community
Skip to main content

I want to add a dollar sign ($) before some text entry boxes, and a percent sign (%) after others. What html code can I add within the question to do this? I don’t know html code, so something I can copy and paste would be very helpful!

@eliasg13 Try to add this JavaScript to the question: 

Qualtrics.SurveyEngine.addOnload(function()
{
jQuery("#"+this.questionId+" .InputText").css("width","95%").before("$ ");
jQuery("#"+this.questionId+" .InputText").css("width","95%").after(" %");
})

If you only want to one of both, just remove the respective line in the code. The code reduces the width of the input so that the $ and % can be shown within the same line.

Or use this if a placeholder is also fine (adjust the $ in the code if you want to show another text as placeholder): 

Qualtrics.SurveyEngine.addOnload(function()
{
jQuery("#"+this.questionId+" inputptype='text']").attr("placeholder","$");
})

Please note that the described solutions will not work for simple layout.

Best
Christian


@chackbusch thank you for the fast reply!

 

When I copy and paste it into the specific question’s HTML view (shown below)

 

It seems to not be working, and instead just showing up in the question text:

 

This very well could be user error since I don’t know how to code. Do you know what I should be doing differently?

Thank you!

Elias


@eliasg13 You must add it as JavaScript:

Please also check my updated code. 

Best
Christian


@chackbusch 

Whoops, thank you!

I am now seeing the dollar sign, but it’s appearing above the question box rather than next to it:

 


Nevermind, using code from another thread I was able to figure it out!

 

Thank you for all your help Christian!


@eliasg13 I checked again and it seems like some standard styles overrule the width adjustment. Please adjust the code to: 

Qualtrics.SurveyEngine.addOnload(function() 
{
// Get the input field ID
var inputFieldSelector = "#" + this.questionId + " .InputText";

// Create a custom style rule
var customStyle = document.createElement('style');
customStyle.type = 'text/css';
customStyle.innerHTML = inputFieldSelector + ' { width: calc(100% - 40px) !important; max-width: calc(100% - 40px) !important; }';

// Append the style rule to the document head
document.head.appendChild(customStyle);

// Wrap the input field with the dollar sign and percent sign
jQuery(inputFieldSelector).wrap('<span style="white-space: nowrap;"></span>');

// Add the dollar sign before the input field
jQuery(inputFieldSelector).before("$ ");

// Add the percent sign after the input field
jQuery(inputFieldSelector).after(" %");
});

Please remove the respective lines at the end if you only need one of both ($ or 😵 for the input. 

Best
Christian


Leave a Reply