How to access custom html inputs via jQuery?

Question

I have a custom slider I'm using in a survey question named `rangeInput`.

Naturally I need to access the value in JS, but I am having trouble
Qualtrics.SurveyEngine.addOnReady(function()
jQuery("#rangeInput").change(function() { // this does not work
// ...
}
});

I can access the slider more generally i.e.,

Qualtrics.SurveyEngine.addOnReady(function()
jQuery("input[type = range]").eq(0).change(function() { // this works
// ...
}
});

but for my purposes I need to access my slider by name. How can I learn how to do this? I've tried other variations I've seen around such as
// ...

currentQID = this.questionId;
jQuery("#" + currentQID + "#rangeInput").eq(0).change(function() {

// ...
}
but this also does not work
Also see:
https://www.qualtrics.com/community/discussion/5963/dynamic-accessing-slider-valueand
https://www.qualtrics.com/community/discussion/5819/using-jquery-to-make-a-field-read-only

Best answer by npetrov937

See attached a working .qsf.
I only added an id to your slider instead of name, i.e.

Then used the following JS:
function sliderChange() {
jQuery("#value")[0].innerHTML = this.value //or anything else you want to do with your value
}

var slider = document.getElementById('rangeInput');
slider.addEventListener('input', sliderChange);

Hope this helps.
How_to_access_custom_html_inputs_via_jQuery.qsf

npetrov937 · Accepted Answer

See attached a working .qsf.I only added an id to your slider instead of name, i.e.Then used the following JS:function sliderChange() {jQuery("#value")[0].innerHTML = this.value //or anything else you want to do with your value}var slider = document.getElementById('rangeInput');slider.addEventListener('input', sliderChange);Hope this helps.How_to_access_custom_html_inputs_via_jQuery.qsf

Sign up

Login to the Community

Scanning file for viruses.

This file cannot be downloaded