I have this problem for question type Constant sum. I managed to increase the answer boxes using CSS in the html view, but it would be way cooler if the boxes would automatically expand when someone enters larger numbers.
Is there a way to do this using JavaScript?
I also want to automatically display thousands separators, so that it is easier to check large numbers.
Cheers,
Patrick
Page 1 / 1
Yes, it is possible to change the size of an input box dynamically with JavaScript. You would add either keyup or input event listeners to the input elements.
You can also add thousands separators with JavaScript. Rather than writing it from scratch, I recommend integrating cleave.js.
You can also add thousands separators with JavaScript. Rather than writing it from scratch, I recommend integrating cleave.js.
Hi Tom,
thanks for your reply. Unfortunately I am not that experienced in using JavaScript. Is there a tutorial on how to include these cleave functions (copy paste didn't work 😉 )
Cheers,
Patrick
thanks for your reply. Unfortunately I am not that experienced in using JavaScript. Is there a tutorial on how to include these cleave functions (copy paste didn't work 😉 )
Cheers,
Patrick
First you have to add the cleave script to the header. Then, in its simplest form, with one question on the page, add something like this to your question js:
```
var cleave = new Cleave('.InputText', {numeral: true, numeralThousandsGroupStyle: 'thousand'});
```
```
var cleave = new Cleave('.InputText', {numeral: true, numeralThousandsGroupStyle: 'thousand'});
```
Hi Tom,
thanks for the reply. I managed to add the js to the question but failed adding the script to the header.
I added it in the 'Look & Feel' - 'Advanced' - 'Header' section like this:
<script src="https://github.com/nosir/cleave.js"></script>
I get the error 'Cleave is not defined'
Could you help me out again?
Cheers,
Patrick
thanks for the reply. I managed to add the js to the question but failed adding the script to the header.
I added it in the 'Look & Feel' - 'Advanced' - 'Header' section like this:
<script src="https://github.com/nosir/cleave.js"></script>
I get the error 'Cleave is not defined'
Could you help me out again?
Cheers,
Patrick
> @patrick said:
> Hi Tom,
>
> thanks for the reply. I managed to add the js to the question but failed adding the script to the header.
> I added it in the 'Look & Feel' - 'Advanced' - 'Header' section like this:
> <script src="https://github.com/nosir/cleave.js"></script>
>
> I get the error 'Cleave is not defined'
>
> Could you help me out again?
>
> Cheers,
> Patrick
You can't load it directly from github. You can load it from jsDelivr CDN.
> Hi Tom,
>
> thanks for the reply. I managed to add the js to the question but failed adding the script to the header.
> I added it in the 'Look & Feel' - 'Advanced' - 'Header' section like this:
> <script src="https://github.com/nosir/cleave.js"></script>
>
> I get the error 'Cleave is not defined'
>
> Could you help me out again?
>
> Cheers,
> Patrick
You can't load it directly from github. You can load it from jsDelivr CDN.
> thanks for the reply. I managed to add the js to the question but failed adding the script to the header.
> I added it in the 'Look & Feel' - 'Advanced' - 'Header' section like this:
> <script src="https://github.com/nosir/cleave.js"></script>
>
> I get the error 'Cleave is not defined'
>
> Could you help me out again?
>
> Cheers,
> Patrick
Would you be uncomfy to share the js you added? I'm trying to accomplish the same task and this is my third day attempting javascript... 😊
> I added it in the 'Look & Feel' - 'Advanced' - 'Header' section like this:
> <script src="https://github.com/nosir/cleave.js"></script>
>
> I get the error 'Cleave is not defined'
>
> Could you help me out again?
>
> Cheers,
> Patrick
Would you be uncomfy to share the js you added? I'm trying to accomplish the same task and this is my third day attempting javascript... 😊
Hi Merina,
this is the JS I added:
Qualtrics.SurveyEngine.addOnload(function()
{
var cleave = new Cleave('.InputText', {numeral: true, numeralThousandsGroupStyle: 'thousand'});
});
Although the problem was solved by hosting the cleave script on a server and integrating that link in the html-header under look&feel with
<script src="https://yourserver/cleave.min.js"></script>
I hope that helps!
Cheers,
Patrick
this is the JS I added:
Qualtrics.SurveyEngine.addOnload(function()
{
var cleave = new Cleave('.InputText', {numeral: true, numeralThousandsGroupStyle: 'thousand'});
});
Although the problem was solved by hosting the cleave script on a server and integrating that link in the html-header under look&feel with
<script src="https://yourserver/cleave.min.js"></script>
I hope that helps!
Cheers,
Patrick
> @patrick said:
> Hi Merina,
>
> this is the JS I added:
>
> Qualtrics.SurveyEngine.addOnload(function()
> {
> var cleave = new Cleave('.InputText', {numeral: true, numeralThousandsGroupStyle: 'thousand'});
>
> });
>
>
> Although the problem was solved by hosting the cleave script on a server and integrating that link in the html-header under look&feel with
> <script src="https://yourserver/cleave.min.js"></script>
>
> I hope that helps!
>
> Cheers,
> Patrick
Thanks! Did that automatically update the size of the box too, or was that just for thousand separators?
> Hi Merina,
>
> this is the JS I added:
>
> Qualtrics.SurveyEngine.addOnload(function()
> {
> var cleave = new Cleave('.InputText', {numeral: true, numeralThousandsGroupStyle: 'thousand'});
>
> });
>
>
> Although the problem was solved by hosting the cleave script on a server and integrating that link in the html-header under look&feel with
> <script src="https://yourserver/cleave.min.js"></script>
>
> I hope that helps!
>
> Cheers,
> Patrick
Thanks! Did that automatically update the size of the box too, or was that just for thousand separators?
No, thats just the thousand separators. I gave up on the box size...
I just increased the box size with CS
<style>
.Skin .CS .SumInput input.InputText, .Skin .CS .SumTotal input, .Skin .CS input.SumInput {
width: 80px;
}
</style>
I just increased the box size with CS
<style>
.Skin .CS .SumInput input.InputText, .Skin .CS .SumTotal input, .Skin .CS input.SumInput {
width: 80px;
}
</style>
@patrick Ahh bummer! I did too haha : ) I increased the box size and also decreased the constant sum font size to make it work. Whatever gets the job done, eh?
@patrick @Merina @TomG
Would anyone be willing to post exactly what needs to be done for this?
1) What cleave code needs to go in the header
2) What JS code needs to go in the question
3) Anything else to consider (like only works if 1 question per page, or something)?
Would anyone be willing to post exactly what needs to be done for this?
1) What cleave code needs to go in the header
2) What JS code needs to go in the question
3) Anything else to consider (like only works if 1 question per page, or something)?
@Akdashboard
1) If you press "Quote" on Patrick's accepted answer you can see the header code between triangle brackets. You have to host the cleave code on a server.
2) That's also in the accepted answer. Qualtrics.SurveyEngine.addOnload(function(){
var cleave = new Cleave('.InputText', {numeral: true, numeralThousandsGroupStyle: 'thousand'});
});
3) I didn't actually do the cleave function because I'm just telling my respondents not to use commas, heh. I have different JS that makes the commas appear later. But I imagine it would work with multiple questions per page.
Both of those things are only for the thousand separators auto appearing, not for the auto-expand boxes. Ask someone else for help on the auto-expand thing because I just made do with a workaround : )
1) If you press "Quote" on Patrick's accepted answer you can see the header code between triangle brackets. You have to host the cleave code on a server.
2) That's also in the accepted answer. Qualtrics.SurveyEngine.addOnload(function(){
var cleave = new Cleave('.InputText', {numeral: true, numeralThousandsGroupStyle: 'thousand'});
});
3) I didn't actually do the cleave function because I'm just telling my respondents not to use commas, heh. I have different JS that makes the commas appear later. But I imagine it would work with multiple questions per page.
Both of those things are only for the thousand separators auto appearing, not for the auto-expand boxes. Ask someone else for help on the auto-expand thing because I just made do with a workaround : )
@Akdashboard,
1) Adding cleave to header:
```
<script src="https://cdn.jsdelivr.net/npm/cleave.js@1/dist/cleave.min.js"></script>
```
2) Add cleave to text input fields on the page:
```
var cleave = new Cleave('.InputText', {numeral: true, numeralThousandsGroupStyle: 'thousand'});
```
3) You can add cleave to specific fields on a page by adding your own class to those elements, then using that class to initiate cleave. It is all in how you write the JavaScript. The example in (2) is the simplest case.
1) Adding cleave to header:
```
<script src="https://cdn.jsdelivr.net/npm/cleave.js@1/dist/cleave.min.js"></script>
```
2) Add cleave to text input fields on the page:
```
var cleave = new Cleave('.InputText', {numeral: true, numeralThousandsGroupStyle: 'thousand'});
```
3) You can add cleave to specific fields on a page by adding your own class to those elements, then using that class to initiate cleave. It is all in how you write the JavaScript. The example in (2) is the simplest case.
> @TomG said:
> @Akdashboard,
> 1) Adding cleave to header:
> ```
> <script src="https://cdn.jsdelivr.net/npm/cleave.js@1/dist/cleave.min.js"></script>
> ```
> 2) Add cleave to text input fields on the page:
> ```
> var cleave = new Cleave('.InputText', {numeral: true, numeralThousandsGroupStyle: 'thousand'});
> ```
> 3) You can add cleave to specific fields on a page by adding your own class to those elements, then using that class to initiate cleave. It is all in how you write the JavaScript. The example in (2) is the simplest case.
Hey Tom - I'm trying to accomplish this now too. Heh. Can I just ask, how can I add classes to my page elements? I have a constant sum question, and the cleave function works great on the first box, but then doesn't work on the rest of my input boxes in the question. I'm guessing I need to add cleave to each individually, but I don't know where to go to set classes for the input boxes that the function can work on. I inspected the page source and tried to input the class name in the cleave function there but didn't have success. Any tips?
> @Akdashboard,
> 1) Adding cleave to header:
> ```
> <script src="https://cdn.jsdelivr.net/npm/cleave.js@1/dist/cleave.min.js"></script>
> ```
> 2) Add cleave to text input fields on the page:
> ```
> var cleave = new Cleave('.InputText', {numeral: true, numeralThousandsGroupStyle: 'thousand'});
> ```
> 3) You can add cleave to specific fields on a page by adding your own class to those elements, then using that class to initiate cleave. It is all in how you write the JavaScript. The example in (2) is the simplest case.
Hey Tom - I'm trying to accomplish this now too. Heh. Can I just ask, how can I add classes to my page elements? I have a constant sum question, and the cleave function works great on the first box, but then doesn't work on the rest of my input boxes in the question. I'm guessing I need to add cleave to each individually, but I don't know where to go to set classes for the input boxes that the function can work on. I inspected the page source and tried to input the class name in the cleave function there but didn't have success. Any tips?
@TomG I don't know javascript, or how to do coding 😀 , so I'm unfamiliar with the syntax.
```
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
jQuery(".Skin button, .Skin input, .Skin select, .Skin textarea").addClass("MyClass");
```
Is that almost it?
I don't know what to put in the first section to call the correct text boxes for the appending.
```
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
jQuery(".Skin button, .Skin input, .Skin select, .Skin textarea").addClass("MyClass");
```
Is that almost it?
I don't know what to put in the first section to call the correct text boxes for the appending.
@Merina,
You don't need to load jQuery, Qualtrics already loads it.
Your selector (.Skin button, etc.) is wrong, but more than that, for a constant sum you really need use a loop to add unique classes to each input element and then attach cleave to each one.
I didn't mention it before, but when you add commas to numbers with cleave (or any other way), then they become strings instead of numbers and your constant sum isn't really a constant sum anymore. Maybe that's OK for your specific survey question. It is possible to format the inputs with Cleave and preserve all the features of a constant sum, but it is quite complex. Here is an example survey question/script that does it. The script has lots of options. You (or anyone else) can contact me by private message if you are interested.
You don't need to load jQuery, Qualtrics already loads it.
Your selector (.Skin button, etc.) is wrong, but more than that, for a constant sum you really need use a loop to add unique classes to each input element and then attach cleave to each one.
I didn't mention it before, but when you add commas to numbers with cleave (or any other way), then they become strings instead of numbers and your constant sum isn't really a constant sum anymore. Maybe that's OK for your specific survey question. It is possible to format the inputs with Cleave and preserve all the features of a constant sum, but it is quite complex. Here is an example survey question/script that does it. The script has lots of options. You (or anyone else) can contact me by private message if you are interested.
Hi all,
I am also trying to add comma separators to a single text input box. I understand that we need to added the following script to the Java for that question:
var cleave = new Cleave('.InputText', {numeral: true, numeralThousandsGroupStyle: 'thousand'});
But I am really struggling with how to add the following portion to the header:
script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cleave.min.js">
Can someone help me with the steps needed to navigate to where this needs to be input? The portion of the text that says "email protected" I am supposed to leave that as is?
Is it possible that since I am using a corporate account that the ability to add script to my header to locked / removed?
Thanks in advance!
https://www.qualtrics.com/community/discussion/comment/33471#Comment_33471The Qualtrics Community replaces anything that look like an email address with "[email protected]". Since the url contains an @ a portion of it gets replaced. Go to https://www.jsdelivr.com, search for cleave, select the file you need and jsdelivr will provide the url you need to copy. Make you are in source mode (<>) when you paste it into the header.
TomG - Thanks that works!
But I do now have the issue that I am not able to convert the Input text to a number upon page completion. I do math with the input on the next page and I want to embed it as a numeric value.
Here is my script:
Within "addonload" I have:
let purchaseinput = new Cleave('.InputText', {numeral: true, numeralThousandsGroupStyle: 'thousand'});
Then within "addOnPageSubmit" I have:
let purchaseamountq = jQuery("#"+this.questionId+" .InputText") ;
let purchaseamountnum = parseFloat(purchaseamountq.replace(/,/g, ""))
Qualtrics.SurveyEngine.setEmbeddedData("Purchased", purchaseamountnum);
The embedding worked before I added the cleave functionality and the parse. I am wondering if it is my retrieving of the input (i.e., JQuery) that might not be working now that I have the cleave added.
Welcome any help on what my issue might be.
Thanks
I don't know why that didn't work, but you should use the cleave function getRawValue.
It's possible the problem is on the next page where you pipe and parse the value.
https://community.qualtrics.com/XMcommunity/discussion/comment/2682#Comment_2682I initially did these steps (the header part) as well as putting the second step in the question add on load but it was not resulting in commas coming automatically for the text being entered. later I realized the inputtext has to be adjusted to match the field with one additional step and then it worked. Might need to try on a multi input question later but atleast for 1 input it worked.
Thank you so much for this amazing thread. It was so clear.
I have a couple questions with more than one answer box. Right now, the commas only appear for the first box. Do you know how I can amend the code so that the commas appear for each box?
Gratefully,
Andrew
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.