Percent sign after text fill. | XM Community
Solved

Percent sign after text fill.

  • 26 September 2018
  • 14 replies
  • 940 views
M
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
icon

Best answer by TomG 26 September 2018, 19:45

View original

14 replies

S
Badge +1

Thank you!

TomG
Rank
Userlevel 7
Badge +27

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

S
Badge +1

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

S
Rank
Userlevel 2
Badge +3
Perfect! Thank you so much!
TomG
Rank
Userlevel 7
Badge +27
> @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.
S
Rank
Userlevel 2
Badge +3
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
Rank
Userlevel 7
Badge +27
> @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");
});
```
S
Rank
Userlevel 2
Badge +3
> @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!
LaurenK
Rank
Userlevel 7
Badge +13
Hey @MattyD! Glad you got a response! In the future, you could also check out our Constant Sum question type!
M
Perfecto Mundo!
TomG
Rank
Userlevel 7
Badge +27
> @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%");
});
```
M
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.
M
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. .......................%_
TomG
Rank
Userlevel 7
Badge +27
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("%");
});
```

Leave a Reply


Terms & Conditions