Using cleave.js to format piped embedded numerical data | XM Community
Skip to main content

Hi there!
With the very helpful posts: https://www.qualtrics.com/community/discussion/comment/17700#Comment_17700 and https://www.qualtrics.com/community/discussion/9916/math-operation-and-cleave-function by TomG, I was able to:
1) add thousand separators to a numeric text input field;
2) record the initial numeric input without thousand separators upon unload of the page (in order to perform mathematical operation on it).
What I would now like to do, is:
3) on a new page, display the outcomes of those calculations, but again with the thousands separator.
Being able to copy and paste code, but clearly not write it myself, what I have more or less randomly tried is this:
In the question JS editor:
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/
var cleave1 = new Cleave(".Separator", {numeral: true, numeralThousandsGroupStyle: 'thousand'});

});
In the question HTML editor:

If you were to invest $${q://QID13/ChoiceTextEntryValue} which scenario would you be most comfortable with?

I guess it was worth a shot, but unsurprisingly it does not work...
Anyone who could help me out with this? Any advice is very much appreciated!

Sorry the above HTML code clearly does not include a mathematical operation. I don't think it matters much in terms of a solution to my challenge, but the math operation could be:

If you were to invest $$e{ ${q://QID13/ChoiceTextEntryValue} / 2 } which scenario would you be most comfortable with?


Joris_Demmers ,
Two things:

  1. cleave.js is only for input fields

  2. You should avoid the using the class name Separator because Qualtrics already uses it for the separators between questions.

If you want to format a number for display you can use wNumb.js.
Say you had:
$e{ q://QID13/ChoiceTextEntryValue} / 2 }
Load wNumb.js in your survey header. Then:
var moneyFormat = wNumb({thousand:",",prefix:"$"});
var num = jQuery(".moneyFormat");
num.html(moneyFormat.to(Number(num.text()));

Thanks TomG this is very helpful!
I feel the solution is now very close :-)
I loaded wNumb.js in the survey header (between 
I then put the other code in the question JS editor like so:
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/


var moneyFormat = wNumb({thousand:",",prefix:"$"});
var num = jQuery(".moneyFormat");
num.html(moneyFormat.to(num.text()));

});
And the question HTML editor like so:

If you were to invest ${q://QID13/ChoiceTextEntryValue} which scenario would you be most comfortable with?



I of course understand there is only so much you can advice remotely. Any suggestions or things I might try are very much appreciated!

Put this in the header instead:

Replace * with @ in the above.

Thanks! Just tried it - I replaced [email protected] by wnumb @ 1.2.0 (without the spaces). But the issue persists...
I have added the survey qsf.
Cleave_and_wNumb.qsfI feel like I am probably making a very simple coding mistake here, but with my practically nonexistent coding skills I can't figure it out...

https://www.qualtrics.com/community/discussion/comment/28195#Comment_28195Joris_Demmers ,
You need to convert the pipe to a number. I updated my original (first) post above to do that.

TomG this worked perfectly! Thank you so much for all your help!
(if someone is trying this and gets the error 'unexpected toked'; the last line needs an extra closing bracket)
(if someone from Qualtrics is reading this; it would be great to add a currency content type)

Leave a Reply


Terms & Conditions