How to apply javascript (cleave.js) to multiple questions? | XM Community
Question

How to apply javascript (cleave.js) to multiple questions?

  • 25 February 2020
  • 2 replies
  • 99 views

Badge +1
Hi All, I'm trying to format questions to force the user to enter a time in the (hh:mm) format. Following this thread, I was able to format only the first text entry question. TomG suggested to use `
jQuery("#"+this.questionId+" .InputText").addClass("newClassName");
`, however, I wasn't sure how to apply it.

I tried : `
jQuery("#"+this.questionId+" .InputText").addClass("newClassName");
new Cleave('.InputText', {
time: true,
timePattern: ['h', 'm']
});
`, but it doesn't work. Does anyone have any insight on how to fix it? Thank you!

2 replies

Userlevel 3
Badge +2
If you are trying to apply the format across multiple text boxes, you may have to use an array statement followed by the 'new Cleave' syntax, placed under the onLoad section for the question.
```javascript
var inputs = jQuery("#"+this.questionId+" .InputText");
inputs .toArray() .forEach(function(' .InputText')
{
new Cleave(' .InputText',
{
time: true,
timePattern: ['h', 'm']
});
});

});
```

I haven't tested this and am typing off the cuff, but hopefully it will give you a little more to work with.
Userlevel 5
Badge +13

Cleavejs_Examples.2022.10.03.qsfAttached is a Qualtrics survey with Cleave.js examples of what works and what does not. The first block in the survey is working syntax, with other blocks showing where things go wrong. The 'Look and Feel/General/Header' option contains the cleave.js import statement. The javascript in each survey question contains the cleave formatting code for that question.

Leave a Reply