Community Groups are officially here!
We've released Groups, a new feature that enables us to connect community members of similar industries and interests in a shared, private space. You can check out all of the details here, including information about who can join, how to join, and what Groups are currently offered. Please leave your feedback through this Community Groups Feedback Survey.

Percent sign after text fill.

MattyD
MattyD Community Member Qubie ✭

Hello,

I have a survey item where the respondent should enter a percentage. I saw another thread where someone added percent signs to numbers on a slidebar, but we didn't like how that rendered on mobile devices. Right now, I have a text fill with a 0-100 validation, and the item's instructions say to enter a percentage. But our pilot tests show people still try to type a % sign in the text fill.

Does anyone have a method to display a "%" after the text fill box? Or, any other ideas on how to collect percent inputs.

Thanks for any help.
-Matt

Best Answers

  • TomG
    TomG Raleigh, NCCommunity Member, Qualtrics Brand Admin Wizard ✭✭✭✭✭
    Accepted Answer

    It isn't clear exactly what type of question you are working with, but try this:

    Qualtrics.SurveyEngine.addOnload(function() {
        jQuery("#"+this.questionId+" .InputText").after("%");
    });
    
  • TomG
    TomG Raleigh, NCCommunity Member, Qualtrics Brand Admin Wizard ✭✭✭✭✭
    Accepted Answer

    @MattyD said:
    Hi again TomG, I spoke too soon. This method still renders oddly on mobile devices. The text box takes up the entire width of the screen and the % wraps to the next line.

    Thoughts? Thanks a million though for the first idea, it was excellent.

    You could update the text box to take up a max of 90% of the screen:

    Qualtrics.SurveyEngine.addOnload(function() {
        var input = jQuery("#"+this.questionId+" .InputText");
        input.after("%");
        input.css("max-width","90%");
    });
    

Answers

  • MattyD
    MattyD Community Member Qubie ✭

    Thanks TomG! This is exactly what I wanted. Just added it and it displays perfectly.

    In case you're still curious, the item I was referring to was:

    What is the overall response rate of your data collection efforts? Please enter a percentage between 0 and 100, or leave blank if you don't know. .......................%

  • MattyD
    MattyD Community Member Qubie ✭

    Hi again TomG, I spoke too soon. This method still renders oddly on mobile devices. The text box takes up the entire width of the screen and the % wraps to the next line.

    Thoughts? Thanks a million though for the first idea, it was excellent.

  • MattyD
    MattyD Community Member Qubie ✭

    Perfecto Mundo!

  • LaurenK
    LaurenK Seattle, WA, USACommunity Administrator Administrator

    Hey @MattyD! Glad you got a response! In the future, you could also check out our Constant Sum question type!

  • Sherly
    Sherly LondonCommunity Member Qubie ✭

    @TomG said:
    It isn't clear exactly what type of question you are working with, but try this:

    Qualtrics.SurveyEngine.addOnload(function() {
      jQuery("#"+this.questionId+" .InputText").after("%");
    });
    

    Hi Tom,
    I would like to ask, how to make the text coloum smaller and to change the style of the static text after the coloum ("tahun") in the picture that I attached. Thank you

  • TomG
    TomG Raleigh, NCCommunity Member, Qualtrics Brand Admin Wizard ✭✭✭✭✭
    edited November 2018

    @Sherly said:
    Hi Tom,
    I would like to ask, how to make the text coloum smaller and to change the style of the static text after the coloum ("tahun") in the picture that I attached. Thank you

    Just modify the second accepted answer above slightly:

    Qualtrics.SurveyEngine.addOnload(function() {
        var input = jQuery("#"+this.questionId+" .InputText");
        input.after("<span style=\"font-size:smaller\">tahun</span>");
        input.css("width","120px");
    });
    
  • Sherly
    Sherly LondonCommunity Member Qubie ✭

    Hi Tom,

    thank you,
    but it did not work. The alert is this:
    "Invalid JavaScript! You cannot save until you fix all errors: Unexpected token -"

  • TomG
    TomG Raleigh, NCCommunity Member, Qualtrics Brand Admin Wizard ✭✭✭✭✭

    @Sherly said:
    Hi Tom,

    thank you,
    but it did not work. The alert is this:
    "Invalid JavaScript! You cannot save until you fix all errors: Unexpected token -"

    Oops, forgot to escape the quotes. Answer updated.

  • Sherly
    Sherly LondonCommunity Member Qubie ✭

    Perfect! Thank you so much!