Solved
Submit button disappears after JavaScript execution in the previous page!
Hi everyone,
I have a slider based question (Link to the survey). The javascript is below for the slider question:
Qualtrics.SurveyEngine.addOnload(function()
{
this.hideNextButton();
});
Qualtrics.SurveyEngine.addOnReady(function()
{
var qobj = this;
var qid = this.questionId;
jQuery(document).on('change', function(){
var item1 = parseFloat(jQuery("#"+qid+"\\\\~1\\\\~true-result").val());
var item2 = parseFloat(jQuery("#"+qid+"\\\\~8\\\\~true-result").val());
var item3 = parseFloat(jQuery("#"+qid+"\\\\~9\\\\~true-result").val());
var item4 = parseFloat(jQuery("#"+qid+"\\\\~10\\\\~true-result").val());
var item5 = parseFloat(jQuery("#"+qid+"\\\\~11\\\\~true-result").val());
if(item1 == 2 && item2 ==1 && item3 == 3 && item4 == 4 && item5 == 5){
qobj.showNextButton();
} else {
qobj.hideNextButton();
}
});
});
I have two questions
Question 1
My issue is -- in the next page (demographics), the next button does not appear. I have tried the following without a success:
1. Added this.showNextButton(); in the PageUnload function.
2. Added this.showNextButton(); in all the functions in the next page.
3. Added a page break after the slider question
It would be great if you anyone of you can help explain. I am guessing that the function on change is running even after a new page is loaded. Is there any way to make it work?
Question 2
Despite using the option of Show values, the values disappear as soon as sliders are moved. Is there any way to make them work so that they are always visible?
Best answer by vkchoudhary
I have found a solution! My guess seems right, instead of querying the document using `jQuery(document)`, I should query the question id, i.e., `jQuery("#"+qid)`. The placement of the code seems fine (addonready).
To show the labels consistently, I found a code that can be used:
`$(ui.handle).find('span').html('$' + ui.value); `
+4After doing a bit of guesswork (wasn't sure if the user had to pick only a specific set of values across all sliders - the code would definitely suggest that), I think your problem has something to do with the addonload-addonready functions. I am note sure, however.
In any way, a working survey attached and JS for the slider is below.
`Qualtrics.SurveyEngine.addOnload(function()
{
this.hideNextButton();
var that = this;
var qid = this.questionId
jQuery(document).on('change', function(){
var item1 = parseFloat(jQuery("#"+qid+"\\\\~1\\\\~true-result").val());
var item2 = parseFloat(jQuery("#"+qid+"\\\\~2\\\\~true-result").val());
console.log(item1, item2)
if (item1 == 1 && item2 == 2) {
that.showNextButton()
} else {
that.hideNextButton();
}
});
});
Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/
});
Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/
});`
In the future, it would be welcome to post a .qsf of a minimal, reproducible example of your problem, especially involving html/css/js.
Cheers!
Thank you @npetrov937. I tested it by moving the code to the addOnLoad function. It does not work.
I have got some hint though, but don't know how to handle it. I am using jQuery(document), which needs to be changed to point to the slider object. But I do not know how to do it.
I am not even sure, why the slider text (current values) do not stay consistently.
I have found a solution! My guess seems right, instead of querying the document using `jQuery(document)`, I should query the question id, i.e., `jQuery("#"+qid)`. The placement of the code seems fine (addonready).
To show the labels consistently, I found a code that can be used:
`$(ui.handle).find('span').html('$' + ui.value); `
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.