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!
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
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
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!
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
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.