Adding warning to text entry box | XM Community
Skip to main content
Solved

Adding warning to text entry box


JohannesCE
Level 6 ●●●●●●
Forum|alt.badge.img+12

In a text entry box question, is it possible to add a standard text that disappears when the respondent starts typing? I'd like to add a warning such as: “Please note that your answers will be registered verbatim” or something like that.

Best answer by Tom_1842

Hmm, what is your setup exactly? The below are all working on my end:

Flat, Modern, Classic Layouts

Text Entry Question Type any size:

jQuery("#"+this.questionId+" .InputText").attr("placeholder", "Please note that your answers will be registered verbatim");

Form Field Question Type:

jQuery("#"+this.questionId+" .InputText").eq(0).attr("placeholder", "1 Please note that your answers will be registered verbatim");
jQuery("#"+this.questionId+" .InputText").eq(1).attr("placeholder", "2 Please note that your answers will be registered verbatim");
jQuery("#"+this.questionId+" .InputText").eq(2).attr("placeholder", "3 Please note that your answers will be registered verbatim");

Multiple Choice Question Type with 'Allow Text Entry' enabled:

jQuery("#"+this.questionId+" .TextEntryBox").attr("placeholder", "Please note that your answers will be registered verbatim");

 

Simple Layout

Add to Header:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Text Entry Question Type any size:

jQuery("#question-"+this.questionId+" .text-input").attr("placeholder", "Please note that your answers will be registered verbatim");

Form Field Question Type:

jQuery("#question-"+this.questionId+" .text-input").eq(0).attr("placeholder", "1 Please note that your answers will be registered verbatim");
jQuery("#question-"+this.questionId+" .text-input").eq(1).attr("placeholder", "2 Please note that your answers will be registered verbatim");
jQuery("#question-"+this.questionId+" .text-input").eq(2).attr("placeholder", "3 Please note that your answers will be registered verbatim");

Multiple Choice Question Type with 'Allow Text Entry' enabled:

jQuery("#question-"+this.questionId+" .text-input").attr("placeholder", "Please note that your answers will be registered verbatim");

 

View original

10 replies

Tom_1842
Level 8 ●●●●●●●●
Forum|alt.badge.img+28
  • Level 8 ●●●●●●●●
  • 876 replies
  • May 24, 2023

I think you might be referring to placeholder text. Try adding the below to the OnReady section of the Text Entry’s JavaScript:

jQuery("#"+this.questionId+" .InputText").attr("placeholder", "Please note that your answers will be registered verbatim");

 


JohannesCE
Level 6 ●●●●●●
Forum|alt.badge.img+12
  • Author
  • Level 6 ●●●●●●
  • 144 replies
  • May 25, 2023
Tom_1842 wrote:

I think you might be referring to placeholder text. Try adding the below to the OnReady section of the Text Entry’s JavaScript:

jQuery("#"+this.questionId+" .InputText").attr("placeholder", "Please note that your answers will be registered verbatim");

 

Hi @Tom_1842 , this is not working for some reason. Does it matter which Style I'm using?


Tom_1842
Level 8 ●●●●●●●●
Forum|alt.badge.img+28
  • Level 8 ●●●●●●●●
  • 876 replies
  • Answer
  • May 25, 2023

Hmm, what is your setup exactly? The below are all working on my end:

Flat, Modern, Classic Layouts

Text Entry Question Type any size:

jQuery("#"+this.questionId+" .InputText").attr("placeholder", "Please note that your answers will be registered verbatim");

Form Field Question Type:

jQuery("#"+this.questionId+" .InputText").eq(0).attr("placeholder", "1 Please note that your answers will be registered verbatim");
jQuery("#"+this.questionId+" .InputText").eq(1).attr("placeholder", "2 Please note that your answers will be registered verbatim");
jQuery("#"+this.questionId+" .InputText").eq(2).attr("placeholder", "3 Please note that your answers will be registered verbatim");

Multiple Choice Question Type with 'Allow Text Entry' enabled:

jQuery("#"+this.questionId+" .TextEntryBox").attr("placeholder", "Please note that your answers will be registered verbatim");

 

Simple Layout

Add to Header:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Text Entry Question Type any size:

jQuery("#question-"+this.questionId+" .text-input").attr("placeholder", "Please note that your answers will be registered verbatim");

Form Field Question Type:

jQuery("#question-"+this.questionId+" .text-input").eq(0).attr("placeholder", "1 Please note that your answers will be registered verbatim");
jQuery("#question-"+this.questionId+" .text-input").eq(1).attr("placeholder", "2 Please note that your answers will be registered verbatim");
jQuery("#question-"+this.questionId+" .text-input").eq(2).attr("placeholder", "3 Please note that your answers will be registered verbatim");

Multiple Choice Question Type with 'Allow Text Entry' enabled:

jQuery("#question-"+this.questionId+" .text-input").attr("placeholder", "Please note that your answers will be registered verbatim");

 


JohannesCE
Level 6 ●●●●●●
Forum|alt.badge.img+12
  • Author
  • Level 6 ●●●●●●
  • 144 replies
  • May 25, 2023

Still nothing. I'm using the Simple Layout, and the question is Text Entry multiple lines.

Is it relevant that there is a Display logic enabled? the question appears based on a previous selection.

 


Tom_1842
Level 8 ●●●●●●●●
Forum|alt.badge.img+28
  • Level 8 ●●●●●●●●
  • 876 replies
  • May 25, 2023

I edited my comment to add that jQuery needs to be included in the Header for Simple layout. Try adding the below to the survey’s Header in the General section of the Look & Feel:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

 


JohannesCE
Level 6 ●●●●●●
Forum|alt.badge.img+12
  • Author
  • Level 6 ●●●●●●
  • 144 replies
  • May 25, 2023

Thank you @Tom_1842 , that did it! Just to be sure: is this addition in the header necessary whenever adding custom JS to questions? Also, adding that line introduced some space between the logo and the survey, how do I remove that?


Tom_1842
Level 8 ●●●●●●●●
Forum|alt.badge.img+28
  • Level 8 ●●●●●●●●
  • 876 replies
  • May 25, 2023

jQuery is included by default for Flat, Modern, and Classic Layouts but not for Simple Layout at this time. Adding it is only necessary for Simple Layout. Also, most IDs and class names are different for Simple Layout. The above code on adding placeholder text is a good example on how things are a little different vs the Flat, Modern, and Classic Layouts.

To remove the space between the logo and the survey for Simple Layout, add the below CSS to the Style section of the Look & Feel:

#page #header-container {
    display: none;
}

 


JohannesCE
Level 6 ●●●●●●
Forum|alt.badge.img+12
  • Author
  • Level 6 ●●●●●●
  • 144 replies
  • May 25, 2023

You're awesome @Tom_1842 , thanks!


Forum|alt.badge.img
  • 2 replies
  • June 30, 2023

May I know how to include the translations for the placeholder text here?


JohannesCE
Level 6 ●●●●●●
Forum|alt.badge.img+12
  • Author
  • Level 6 ●●●●●●
  • 144 replies
  • June 30, 2023
KSaran wrote:

May I know how to include the translations for the placeholder text here?

Hi @KSaran, this is how I did it (in my case Dutch is the default):

Qualtrics.SurveyEngine.addOnload(function() {
    /* Place your JavaScript here to run when the page loads */
});

Qualtrics.SurveyEngine.addOnReady(function() {
    var placeholderText = "";

    // Get the language code from the survey object
    var Q_Language = Qualtrics.SurveyEngine.getEmbeddedData('Q_Language');

    // Set the placeholder text based on the language code
    if (Q_Language === "EN") {
        placeholderText = "Please note:";
    } else if (Q_Language === "DE") {
        placeholderText = "Bitte beachten Sie:";
    } else if (Q_Language === "FR") {
        placeholderText = "Veuillez noter que:";
    } else {
        placeholderText = "Let op:";
    }

    // Set the placeholder text for the text entry questions
    jQuery("#" + this.questionId + " .InputText, .TextEntryBox").attr("placeholder", placeholderText);
});

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

 


Leave a Reply