Default text in a response that disappears when clicked on | XM Community
Solved

Default text in a response that disappears when clicked on


Badge
How do we set default text that can disappear when a text box is clicked on? A client has a verbatim question and in this box needs to provide some instruction about not entering personal details here. I have set a default text response but the customer has to manually delete this before providing their response and also can submit this default text as a response. I need something that works in the same way as the email and name fields in the attached image, an example is provided to give you an idea of the format required, but when you click in the text disappears. How can this be done in the survey?

!
icon

Best answer by TomG 15 March 2018, 13:59

View original

37 replies

Userlevel 1
Badge +8

I used this in my survey and works perfect :-)
Qualtrics.SurveyEngine.addOnload(function()
{
if( "${e://Field/Q_Language}" =="NL") //Check which language is selected
 {  
jQuery("#"+this.questionId+" .InputText").attr("placeholder", "Door ons uw feedback te geven, kunt u ons helpen deze pagina te verbeteren. Uw feedback zal anoniem worden verwerkt.");
 } 

 if( "${e://Field/Q_Language}" =="EN") //Check which language is selected
 {  
jQuery("#"+this.questionId+" .InputText").attr("placeholder", "By giving us your feedback, you can help us improve this page. Your feedback will be processed anonymously.");
}

if( "${e://Field/Q_Language}" =="FR") //Check which language is selected
 {  
jQuery("#"+this.questionId+" .InputText").attr("placeholder", "En nous donnant votre avis, vous pouvez nous aider à améliorer cette page. Vos commentaires seront traités de manière anonyme.");
}
}
);

Userlevel 7
Badge +27

https://community.qualtrics.com/XMcommunity/discussion/comment/42468#Comment_42468Yes, pipe the placeholder text into the JS from a translated question.

Userlevel 1
Badge +8

Thanks. This is exactly what i need. But we use different languages of th esurvey (dutch, french & english). Could this also be used linguistically?

Thank you!

Userlevel 7
Badge +27

https://www.qualtrics.com/community/discussion/comment/29210#Comment_29210The code provided works on a Constant Sum question. For a constant sum matrix change it to:
Qualtrics.SurveyEngine.addOnload(function() {
jQuery("#"+this.questionId+" td:not(.CSTotal) input[type=text]").focus(function() {
if(this.value == "0") this.value="";
});
});

https://www.qualtrics.com/community/discussion/comment/29204#Comment_29204Right, thanks for pointing out the difference! The code you provided is not making the default choices (0) disappear when you click on the box. Any ideas of something else I can try?

Userlevel 7
Badge +27

https://www.qualtrics.com/community/discussion/comment/29203#Comment_29203The "0" in a constant sum isn't a placeholder, it is the initial default value. If a field has a value (i.e., is non-blank) the placeholder won't display.
You don't need a placeholder. I think you want:
Qualtrics.SurveyEngine.addOnload(function() {
jQuery("#"+this.questionId+" .SumInput .InputText").focus(function() {
if(this.value == "0") this.value="";
});
});

Hi TomG I am trying to make a default choice in a constant sum matrix table have a default choice equal to zero and have the 0 disappear when respondents click on the boxes to enter a number. I tried using the code below in addonload but it's not working. The table could also be text matrix if needed. Would you know how I can do this? Thank you in advance!


jQuery("#"+this.questionId+" .InputText").each(function() {
jQuery(this).attr("placeholder", "My placeholder text");
});

THAT'S IT! Took a sec to realize the ph"x" corresponded to the text in each placeholder field but it works perfectly!

Userlevel 7
Badge +27

https://www.qualtrics.com/community/discussion/comment/27600#Comment_27600You could do this:
var ph = ["ph1","ph2","ph3","ph4","ph5","ph6"];
jQuery("#"+this.questionId+" .InputText").each(function(i) {
jQuery(this).attr("placeholder", ph[i]);
});

Getting back to the original question, I have a series of 6 text boxes in a question and I need to add custom placeholder text that is different for each box. I have used the code noted above but it still only places the same set of text in each box. I am not sure how I can tell the script to place a specific text string in a specific text box... Any help is welcome!
Thanks

Userlevel 7
Badge +27

The url is an image you upload to your Qualtrics library. After you upload it, copy the url into your CSS.

TomG: Sorry for asking so many questions i am very new to Qualtrics.
I found the below link used in one of the earlier study, what I understand is that the logo is being removed and replaced with background in url. Now if I need to do the same how do I develop the url?
Please help, appreciate it
html .Skin #Logo {display: none;}
#SurveyEngineBody {
  background: url(https://etihad.eu.qualtrics.com/CP/Graphic.php?IM=IM_86xvhpypazMDskl) no-repeat fixed;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 background-size: cover;
}

TomG
Thanks 🙂... will try.
Another question on the topic of changing logo. I already have existing static template with everything (color, format) in place. However since our logo changed this year someone had put in placed Custom CSS code for the new logo while everything (formatting and color) remains same. I mistakenly removed the Custom CSS code.
Can you help me how to write the custom CSS code?

Userlevel 7
Badge +27

TomG : Hi Tom, it works with a single text box, however doesn't work with multiple text boxes in the same question
I forgot .attr() only works on the 1st element in the set, use .each():
jQuery("#"+this.questionId+" .InputText").each(function() {
jQuery(this).attr("placeholder", "My placeholder text");
});

TomG : Hi Tom, it works with a single text box, however doesn't work with multiple text boxes in the same question

Userlevel 7
Badge +27

@Fahad,
The code provided will add a placeholder to all the textarea elements on the page. Change the jQuery selector as needed.

TomG

Hi Tom thanks for your guidance, need your help. Can you show how to the text comment in multiple text boxes?

Badge
@TomG This is still not working. I tried below code as well but no help
jQuery("#"+this.questionId+" .InputText").attr("placeholder", "Please Explain.").onfocus="this.placeholder = ''";
Userlevel 7
Badge +27
> @Sugra said:
> @TomG Thank you for responding Tom
> I tried below code for focus event but doesn't seem to be working.
> Can you help me if I am doing anything wrong here?
> {
> /*Place your JavaScript here to run when the page loads*/
> jQuery("#"+this.questionId+" .InputText").attr("placeholder", "Please Explain.");
> jQuery("#" + this.questionId + " .InputText").focus(function(){
> jQuery("#"+this.questionId+" .InputText").removeAttr("placeholder", "Please Explain.");
> });
> });

Your removeAttr syntax is wrong. Change to .removeAttr("placeholder");
Badge
@TomG Thank you for responding Tom
I tried below code for focus event but doesn't seem to be working.
Can you help me if I am doing anything wrong here?
{
/*Place your JavaScript here to run when the page loads*/
jQuery("#"+this.questionId+" .InputText").attr("placeholder", "Please Explain.");
jQuery("#" + this.questionId + " .InputText").focus(function(){
jQuery("#"+this.questionId+" .InputText").removeAttr("placeholder", "Please Explain.");
});
});
Userlevel 7
Badge +27
> @Sugra said:
> @TomG Hey Tom,
> jQuery("#"+this.questionId+" .InputText").attr("placeholder", "Please Explain.");
> I tried this code for my case but doesn't seem to be working. It is placing a placeholder text but it disappears when a customer starts typing in the box. My requirement is the default text should disappear when the customer clicks in the box. I tried doing it with on-click/onfocus functionality but it didn't help. Can you please help?

That's the way placeholders work. You can use a focus event to remove the placeholder attribute to get the desired functionality.
Badge
@TomG Hey Tom,
jQuery("#"+this.questionId+" .InputText").attr("placeholder", "Please Explain.");
I tried this code for my case but doesn't seem to be working. It is placing a placeholder text but it disappears when a customer starts typing in the box. My requirement is the default text should disappear when the customer clicks in the box. I tried doing it with on-click/onfocus functionality but it didn't help. Can you please help?
@rwh - This worked for me:

jQuery("#"+this.questionId+" .InputText").attr("placeholder", "Please Explain.");
Userlevel 7
Badge +27
> @TMartin53 said:
> Hi,
>
> Can I apply this same coding to a multiple choice question with an "other" option with text entry? Screenshot is attached below.

Yes.

Leave a Reply