Default text in a response that disappears when clicked on

James_Byrne_KantarJames_Byrne_Kantar [email protected]Unconfirmed, Qualtrics Partner Qubie ✭

Default text in a response that disappears when clicked on

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?

Best Answer

Answers

  • James_Byrne_KantarJames_Byrne_Kantar [email protected]Unconfirmed, Qualtrics Partner Qubie ✭

    thanks again! @TomG

  • khalidkhalid United Arab EmiratesCommunity Member Qubie ✭

    @TomG said:
    Use JavaScript to add a placeholder attribute to the input element.

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

    Can this also work in the Form text type? because when i used it it shows me First name in all the fields.

  • TomGTomG Raleigh, NCCommunity Member Wizard ✭✭✭✭✭

    @khalid said:

    Can this also work in the Form text type? because when i used it it shows me First name in all the fields.

    That line of JS adds the placeholder to all the elements in the question with a class of InputText. For a text form, you'd need to modify it to add specific placeholders to specific fields.

  • khalidkhalid United Arab EmiratesCommunity Member Qubie ✭

    Thanks Tom, i will try to find out the specific placeholder for each field.

  • red5red5 UtahCommunity Member Qubie ✭

    I had the same question. By adapting the info TomG sent, I was able to change all of my textarea default text with a jQuery loop in the theme footer like this. If each of your textareas need a different message, then (of course) this won't work.

    <script>
    Qualtrics.SurveyEngine.addOnload(function() {   
            jQuery("textarea").each(function() {
                jQuery(this).attr("placeholder","Enter your comments here.");
            });
    });
    </script>
    
  • TomGTomG Raleigh, NCCommunity Member Wizard ✭✭✭✭✭

    @red - You shouldn't need a loop...that's the beauty of jQuery. This should work:

    <script>
    Qualtrics.SurveyEngine.addOnload(function() {   
            jQuery("textarea").attr("placeholder","Enter your comments here.");
    });
    </script>
    
  • EllenWEllenW Community Member Qubie ✭

    @TomG , thank you for the code. I'm still at an early level of qualtrics and can't figure out how to implement your solution for disappearing default text/placeholder text ("attribute" and "input" haven't turned up any useful resources in the community) . Are you able to point to any more resources showing the step-by-step process? Thank you!

  • TomGTomG Raleigh, NCCommunity Member Wizard ✭✭✭✭✭

    @EllenW said:
    @TomG , thank you for the code. I'm still at an early level of qualtrics and can't figure out how to implement your solution for disappearing default text/placeholder text ("attribute" and "input" haven't turned up any useful resources in the community) . Are you able to point to any more resources showing the step-by-step process? Thank you!

    Your image doesn't have a JS icon on the left, which means you haven't added the JavaScript. Click on the cog, select Add JavaScript, and paste the JS from the accepted answer above into the addOnload function.

  • EllenWEllenW Community Member Qubie ✭

    @TomG that works beautifully, thank you!!!

  • TMartin53TMartin53 Community Member Qubie ✭

    Hi,

    Can I apply this same coding to a multiple choice question with an "other" option with text entry? Screenshot is attached below.

  • rwhrwh MontanaCommunity Member Qubie ✭

    @TMartin53 did you get an answer to this? I have the same question.

  • TomGTomG Raleigh, NCCommunity Member Wizard ✭✭✭✭✭

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

  • TMartin53TMartin53 Community Member Qubie ✭

    @rwh - This worked for me:

    jQuery("#"+this.questionId+" .InputText").attr("placeholder", "Please Explain.");

  • SugraSugra IndiaCommunity Member - Trial User Qubie ✭

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

  • TomGTomG Raleigh, NCCommunity Member Wizard ✭✭✭✭✭

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

  • SugraSugra IndiaCommunity Member - Trial User Qubie ✭

    @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.");
    });
    });

  • TomGTomG Raleigh, NCCommunity Member Wizard ✭✭✭✭✭

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

  • SugraSugra IndiaCommunity Member - Trial User Qubie ✭

    @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 = ''";

Sign In to Comment