Add jQuery calculator to text input | XM Community
Skip to main content

Hi,
I've been attempting to add a drop-down calculator to a text input (from http://keith-wood.name/calculator.html) but the calculator doesn't show up at all. I'm not sure what I am doing wrong and I'm new to javascript. Any help would be appreciated!
I uploaded the jquery.calculator.css, jquery.calculator.js, and jquery.plugin.js text files to Qualtrics library.
Here's what I have in the HTML section of the text input:
 
 

Here's what I have in the Javascript section:
jQuery("#"+this.questionId+" .InputText").calculator();

You should load it from jsDelivr instead. Put the html in the survey header or footer (edit in source mode):


Hi Tom,
Happy new year! Thank you for answering so quickly. I've pasted your html to the survey header (definitely in source mode), but unfortunately it's still not working. Is there anything else I should be taking note of?

https://community.qualtrics.com/XMcommunity/discussion/comment/53502#Comment_53502Turns out that the plugin needs to be loaded before the calculator. I've updated the code in the post above.

Thanks for updating the code. I've tried it, but the calculator still doesn't show up. Has it worked for you?

Yes, it works. Here is a link to a preview. The JS is:
Qualtrics.SurveyEngine.addOnload(function() {
jQuery("#"+this.questionId+" .InputText").calculator();
});

I have no idea what was different in my JS but after I cleared it and only added your line of JS code it worked?! Thanks so much Tom, you are a life saver. Cheers!

Leave a Reply


Terms & Conditions