Help adding placeholder text in text input box | XM Community
Skip to main content
Question

Help adding placeholder text in text input box


Forum|alt.badge.img+1

I’ve looked at previous posts about adding place holder text and tried a few codes but non seem to be working for me. No text appears. Can anyone please advise on what I’m doing wrong?

 

The code is:
 

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

    var placeholderText = 'I am different text';
    jQuery("#"+this.questionId+ " .InputText").attr("placeholder", placeholderText);

});

 

12 replies

Forum|alt.badge.img+20
  • QPN Level 5 ●●●●●
  • 290 replies
  • March 1, 2024

@Ali Ajrouch Your code seems to work for me, please check if you have other CSS HTML applied to the survey anywhere which may be overriding your code.
But still can you try the below code, a modified version of it.

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

    var placeholderText = 'I am different text';
    jQuery("#"+this.questionId+ " input[type='text']").attr("placeholder", placeholderText);

});
 


Forum|alt.badge.img+1
  • Author
  • Level 1 ●
  • 8 replies
  • March 1, 2024

thank you @omkarkewat ! i gave it a try but still getting the same results. I have my institution’s style in place but i doubt that’s it. 


Forum|alt.badge.img+20
  • QPN Level 5 ●●●●●
  • 290 replies
  • March 1, 2024

@Ali Ajrouch There must be something because of which your code isn’t working as it did work at my end. Please try this code in any of your friend’s/colleague’s Qualtrics account who is in the same institution of yours and then we can come to some conclusion.


Forum|alt.badge.img+1
  • Author
  • Level 1 ●
  • 8 replies
  • March 1, 2024

So i changed the layot to modern from simple layout and the javascript is working now. Isn’t simple layout compatible with custom JS?


Forum|alt.badge.img+20
  • QPN Level 5 ●●●●●
  • 290 replies
  • March 1, 2024

Yes you are right, I don’t believe that I missed it. It’s mentioned in the support page as well that Simple layout has some limitations.

Try going through this support page.


Forum|alt.badge.img+1
  • Author
  • Level 1 ●
  • 8 replies
  • March 1, 2024

Thank you very much! It’s weird that they don’t work. Are there any modifications we can do? It’s such a simple script. 


Forum|alt.badge.img+20
  • QPN Level 5 ●●●●●
  • 290 replies
  • March 1, 2024

Can you try adding the below code in Survey look and feel → Header section , to call a JQuery library.

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


Forum|alt.badge.img+1
  • Author
  • Level 1 ●
  • 8 replies
  • March 1, 2024

I tried but it didn’t work unfortunetly. Thank you for all the help @omkarkewat, the current product is good enough. 


TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • 5940 replies
  • March 1, 2024

The equivalent code for Simple layout would be:

Qualtrics.SurveyEngine.addOnload(function() {
	jQuery("#question-"+this.questionId+" .text-input").attr("placeholder","placeholder text goes here");
});

 


Forum|alt.badge.img+1
  • Author
  • Level 1 ●
  • 8 replies
  • March 3, 2024

@TomG thank you for the help but didn’t work for me unfortunetly.
 

 


TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • 5940 replies
  • March 4, 2024

 

Ali Ajrouch wrote:

@TomG thank you for the help but didn’t work for me unfortunetly.

 

It works for me. Therefore, I’m guessing you didn’t load jQuery in the survey header.


Forum|alt.badge.img+1
  • Author
  • Level 1 ●
  • 8 replies
  • March 6, 2024

Thank you  very very much @TomG . You’re right i had removed the jQuery in the header. I did and it’s working nicely! 


Leave a Reply