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 Answers

  • TomG
    TomG Raleigh, NC Wizard ✭✭✭✭✭
    Accepted Answer

    You could do this:

    var ph = ["ph1","ph2","ph3","ph4","ph5","ph6"];
    jQuery("#"+this.questionId+" .InputText").each(function(i) {
      jQuery(this).attr("placeholder", ph[i]);
    });
    


«1

Answers

  • khalid
    khalid United Arab Emirates 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.

  • TomG
    TomG Raleigh, NC 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.

  • khalid
    khalid United Arab Emirates Qubie ✭

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

  • red5
    red5 Utah 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>
    
  • TomG
    TomG Raleigh, NC 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>
    
  • EllenW
    EllenW 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!

  • TomG
    TomG Raleigh, NC 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.

  • EllenW
    EllenW Qubie ✭

    @TomG that works beautifully, thank you!!!

  • Hi,

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

  • rwh
    rwh Montana Qubie ✭

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

  • TomG
    TomG Raleigh, NC 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.

  • @rwh - This worked for me:

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

  • Sugra
    Sugra India 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?

  • TomG
    TomG Raleigh, NC 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.

  • Sugra
    Sugra India 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.");
    });
    });

  • TomG
    TomG Raleigh, NC 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");

  • Sugra
    Sugra India 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 = ''";

  • Fahad
    Fahad UAE Qubie ✭

    @TomG

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

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