Using cleave.js to format piped embedded numerical data | XM Community
Solved

Using cleave.js to format piped embedded numerical data

  • 22 July 2020
  • 9 replies
  • 169 views
Joris_Demmers
Badge

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!

icon

Best answer by TomG 24 July 2020, 15:30

View original

9 replies

Joris_Demmers
Badge

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?


TomG
Rank
Userlevel 7
Badge +27

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()));

Joris_Demmers
Badge

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!

TomG
Rank
Userlevel 7
Badge +27

Put this in the header instead:

Replace * with @ in the above.

Joris_Demmers
Badge

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...

TomG
Rank
Userlevel 7
Badge +27

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.

Joris_Demmers
Badge

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