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

Hi @uhrxx005, You may use below link as a reference to format your text entry box. https://codepen.io/tutsplus/pen/PzpoWK Regards, Samarth

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?

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

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: '$' }); });

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: '$' }); ```

> @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?

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

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

@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, 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?

> @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"); ```