Percent sign after text fill. | Experience Community
Skip to main content
JoseS
Administrator
1 year ago
Solved

Percent sign after text fill.

  • Sep 26, 2018 5:27 PM UTC
  • 14 replies
  • 1801 views
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 answer by TomG

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("%"); }); ```
View original

14 replies

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • TomG
  • Level 8 ●●●●●●●●
  • Answer
  • Sep 26, 2018 5:45 PM UTC
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("%"); }); ```
    • MattyD
    • Author
    • Sep 26, 2018 6:57 PM UTC
    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
    • Author
    • Sep 26, 2018 7:10 PM UTC
    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.
    TomG
    Level 8 ●●●●●●●●
    Forum|alt.badge.img+27
    • TomG
    • Level 8 ●●●●●●●●
    • Sep 26, 2018 7:23 PM UTC
    > @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%"); }); ```
      • MattyD
      • Author
      • Sep 26, 2018 7:28 PM UTC
      Perfecto Mundo!
      LaurenK
      Former XM Community Team Member
      Forum|alt.badge.img+13
      • LaurenK
      • Former XM Community Team Member
      • Sep 27, 2018 6:56 PM UTC
      Hey @MattyD! Glad you got a response! In the future, you could also check out our Constant Sum question type!
      Level 1 ●
      Forum|alt.badge.img+3
      • Sherly
      • Level 1 ●
      • Nov 2, 2018 11:34 AM UTC
      > @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
      Level 8 ●●●●●●●●
      Forum|alt.badge.img+27
      • TomG
      • Level 8 ●●●●●●●●
      • Nov 2, 2018 12:13 PM UTC
      > @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"); }); ```
      Level 1 ●
      Forum|alt.badge.img+3
      • Sherly
      • Level 1 ●
      • Nov 2, 2018 12:24 PM UTC
      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
      Level 8 ●●●●●●●●
      Forum|alt.badge.img+27
      • TomG
      • Level 8 ●●●●●●●●
      • Nov 2, 2018 12:47 PM UTC
      > @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.
        Level 1 ●
        Forum|alt.badge.img+3
        • Sherly
        • Level 1 ●
        • Nov 2, 2018 12:51 PM UTC
        Perfect! Thank you so much!
        Forum|alt.badge.img+3
        • susanw
        • Mar 31, 2022 3:51 PM UTC

        Hi! I've used the JS custom code suggested above to Q1 of my survey. Q2 also has an open text box response but it does not have the JS code, but it is also showing a "%" sign. Any insight into why that would be?
        Qualtrics.SurveyEngine.addOnload(function()
        { jQuery('input[type="text"]').after(" %")});

        TomG
        Level 8 ●●●●●●●●
        Forum|alt.badge.img+27
        • TomG
        • Level 8 ●●●●●●●●
        • Mar 31, 2022 3:56 PM UTC

        https://community.qualtrics.com/XMcommunity/discussion/comment/45066#Comment_45066jQuery('input[type="text"]')
        finds all text inputs on the page. That is why the code in the accepted answer uses:
        jQuery("#"+this.questionId+" .InputText")

        Forum|alt.badge.img+3
        • susanw
        • Mar 31, 2022 4:03 PM UTC

        Thank you!

        Terms & ConditionsAccessibility statement