Using Cleave.js in One Field of a Form Field | Experience Community
Skip to main content
Solved

Using Cleave.js in One Field of a Form Field

  • August 2, 2022
  • 4 replies
  • 311 views
jflowers1
Level 4 ●●●●
Forum|alt.badge.img+34

I have a form field survey question with seven fields, and I need only the last field to be displayed as currency. It seems like cleave.js is a great option for this; I have tested it out and it works great. However, it's showing up only on the first field in the form field question, and I need it to only be on the last one.
I know I need to refer to the specific field somehow but I'm still new to JavaScript so I'm not sure what to do.
Below is what I have added to the JavaScript of the question:
new Cleave('.InputText', {
numeral: true,
prefix: '$'
});
What do I need to add or change so that it is only used on the last field of the form question?

Best answer by TomG

Try this:
var lastInput = jQuery("#"+this.questionId+" .InputText:last").get(0);
new Cleave(lastInput, {
numeral: true,
prefix: '$'
});

4 replies

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • TomG
  • Level 8 ●●●●●●●●
  • Answer
  • August 2, 2022

Try this:
var lastInput = jQuery("#"+this.questionId+" .InputText:last").get(0);
new Cleave(lastInput, {
numeral: true,
prefix: '$'
});

jflowers1
Level 4 ●●●●
Forum|alt.badge.img+34
  • jflowers1
  • Author
  • Level 4 ●●●●
  • August 2, 2022

TomG That worked, thank you so much!

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • TomG
  • Level 8 ●●●●●●●●
  • August 3, 2022

https://community.qualtrics.com/XMcommunity/discussion/comment/48221#Comment_48221In that case, please accept the answer.

A
Level 1 ●
Forum|alt.badge.img+1
  • Anahivette
  • Level 1 ●
  • January 25, 2024

I realize this is a year old convo, but I’m looking for a custom code solution for automatically showing commas and decimals inside the a single text entry box for a currency question.

I’m a complete coding novice...read as much as I could on Cleave.js and tried multiple codes including this one and wasn’t able to get it to work.

I was trying to figure this one out for my purpose, but obviously I’m missing something. Any help would be appreciated,

var cleave = new Cleave('.input-element', {
    numeral: true,
    numeralThousandsGroupStyle: 'thousand'
});
Terms & ConditionsAccessibility statement