Help adding placeholder text in text input box | XM Community
Question

Help adding placeholder text in text input box

  • 29 February 2024
  • 12 replies
  • 278 views
A
Rank
Badge +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

O
Rank
Userlevel 5
Badge +12

@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);

});
 

A
Rank
Badge +1

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. 

O
Rank
Userlevel 5
Badge +12

@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.

A
Rank
Badge +1

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

O
Rank
Userlevel 5
Badge +12

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.

A
Rank
Badge +1

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. 

O
Rank
Userlevel 5
Badge +12

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>

A
Rank
Badge +1

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

TomG
Rank
Userlevel 7
Badge +27

The equivalent code for Simple layout would be:

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

 

A
Rank
Badge +1

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

 

TomG
Rank
Userlevel 7
Badge +27

 

@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.

A
Rank
Badge +1

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


Terms & Conditions