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?
Page 1 / 1
Hi @uhrxx005,
You may use below link as a reference to format your text entry box.
https://codepen.io/tutsplus/pen/PzpoWK
Regards,
Samarth
You may use below link as a reference to format your text entry box.
https://codepen.io/tutsplus/pen/PzpoWK
Regards,
Samarth
@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.
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.
Thank you both for these solutions!
Did anyone get this to successfully work? The instructions didn't seem to work for me 
> @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?
> @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?
> @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.
> > @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.
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: '$'
});
});
`<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: '$'
});
});
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: '$'
});
```
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: '$'
});
```
> @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?
> 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?
> @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.
> 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.
@TomG Thank you so much! That worked perfectly.
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.
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.
@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.
> @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.
> @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.
@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.
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.
@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?
I'm not very familiar with JS. Would you able to provide some guidance (or sample code) that I could use for this survey?
> @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");
```
> @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
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.