Is it possible to format a text entry box so responses are formatted based on US dollars | XM Community
Solved

Is it possible to format a text entry box so responses are formatted based on US dollars


Userlevel 6
Badge +5
I would like my text entry question to automatically apply a $ and commas and decimal places when appropriate to make it clear that respondents should be entered in a dollar amount. Is this possible with Java?
icon

Best answer by TomG 17 May 2018, 15:10

View original

17 replies

Userlevel 4
Badge +5
Hi @uhrxx005,

You may use below link as a reference to format your text entry box.

https://codepen.io/tutsplus/pen/PzpoWK

Regards,
Samarth
Userlevel 7
Badge +27
@uhrxx005,

Yes, you can use JavaScript to do this. I recommend using cleave.js since I've had good success integrating it with Qualtrics. There is a $ example here.
Userlevel 6
Badge +5
Thank you both for these solutions!
Badge +2
Did anyone get this to successfully work? The instructions didn't seem to work for me 😞
Userlevel 1
Badge +2
> @TomG said:
> @uhrxx005,
>
> Yes, you can use JavaScript to do this. I recommend using cleave.js since I've had good success integrating it with Qualtrics. There is a $ example here.

I'm having difficulty getting this to work. I want to format a text entry box with as a dollar amount but can't get all the pieces to work together. Can you clarify the steps necessary to making this work?
Userlevel 7
Badge +27
> @ambrubaker said:
> > @TomG said:
> > @uhrxx005,
> >
> > Yes, you can use JavaScript to do this. I recommend using cleave.js since I've had good success integrating it with Qualtrics. There is a $ example here.
>
> I'm having difficulty getting this to work. I want to format a text entry box with as a dollar amount but can't get all the pieces to work together. Can you clarify the steps necessary to making this work?

Please post your code.
Userlevel 1
Badge +2
In the survey header, I added
`<script src="cleave.min.js"></script>`



Then in the added the following JavaScript to the question:
Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/
new Cleave('.input-1', {
numeral: true,
prefix: '$'
});
});
Userlevel 7
Badge +27
You can't copy an example verbatim and expect it to work in another environment.

Your JS source is wrong. You can use:
```
<script src="https://cdn.jsdelivr.net/npm/cleave.js@1/dist/cleave.min.js"></script>
```

You need to refer to the input element with a class Qualtrics uses:
```
new Cleave('.InputText', {
numeral: true,
prefix: '$'
});
```
Userlevel 1
Badge +2
> @TomG said:
> You can't copy an example verbatim and expect it to work in another environment.
>
> Your JS source is wrong. You can use:
> ```
> <script src="https://cdn.jsdelivr.net/npm/cleave.js@1/dist/cleave.min.js"></script>
> ```
>
> You need to refer to the input element with a class Qualtrics uses:
> ```
> new Cleave('.InputText', {
> numeral: true,
> prefix: '$'
> });
> ```

Thank you for the reply. One item for clarification, do I need to insert a different value for "[email_protected]"? Or should I be able to copy/paste the code you have provided above?
Userlevel 7
Badge +27
> @ambrubaker said:
> Thank you for the reply. One item for clarification, do I need to insert a different value for "[email_protected]"? Or should I be able to copy/paste the code you have provided above?

Yes, Qualtrics Community replaces strings that have an @. It should be replaced with cleave.js @ 1 without the spaces.
Userlevel 1
Badge +2
@TomG Thank you so much! That worked perfectly.
Userlevel 1
Badge +2
I think I may be running into another issue with the code. In my survey instrument, I have copied the JS on four different questions within the same block. When the form is submitted, a "$" is inserted into the first text box in the same block. Do I need to add something to the JS code differentiate between the four different text boxes? I'm concerned that the "$" that is being placed in the first text box on the block is overwriting any information the user may have already entered into that field.

I have attached a .qsf of the survey. Reference the "Organization, Location, Compensation, and Study Details" block for the questions/fields with the JS applied.
Userlevel 6
Badge +5
@ambrubaker I don't know javascript but I was able to figure this one out and I saved it as a survey for my team to use. Feel free to take a look. It might be beneficial.
Userlevel 1
Badge +2
> @uhrxx005 said:
> @ambrubaker I don't know javascript but I was able to figure this one out and I saved it as a survey for my team to use. Feel free to take a look. It might be beneficial.

Thanks for the file but I already have this JS code in my survey. It doesn't address the issue multiple InputText fields.
Userlevel 7
Badge +27
@ambrubaker,

cleave is attached to the input fields using a class name. If you have multiple input fields on a page, you may need to write some JS to add unique class names to the different fields you want to attach cleave to.
Userlevel 1
Badge +2
@TomG

I'm not very familiar with JS. Would you able to provide some guidance (or sample code) that I could use for this survey?
Userlevel 7
Badge +27
> @ambrubaker said:
> @TomG
>
> I'm not very familiar with JS. Would you able to provide some guidance (or sample code) that I could use for this survey?

You can add a class to a text in input element like this:
```
jQuery("#"+this.questionId+" .InputText").addClass("newClassName");
```

Leave a Reply