Hide next button unless In-page display logic question is shown | XM Community
Skip to main content

Hi all, 

I have Item 1 and Item 2 in one survey block. Item 2 uses in-page display logic, showing up (in page) only if a specific value is selected for Item 1. Now I want to have the Next button hidden if Item 2 is not displayed - and the Next button showing up if Item 2 is displayed. 

I searched and found this post below, but for some reason it doesn’t work for me… 

Any help will be much appreciated! Thank you in advance!

 

 

 

Hi ​@DashaG ,

 

Did you change the QID number to fit your situation?

I placed the following JavaScript code, from the thread you mentioned, into question QID36 (item 1)’s Add JavaScript. Then, question QID37 (Item 2) having in-page display.

It is working, where the next button is hidden when Item 2 is not displayed.

Qualtrics.SurveyEngine.addOnReady(function()
{
jQuery("#NextButton").hide();
jQuery(".JFE").on("mouseover change click", function(){
jQuery("#NextButton").hide();
/*Change QID37 to your question*/
if (jQuery("#QID37").is(":visible")){
jQuery("#NextButton").show();
}else{
jQuery("#NextButton").hide();
}})}
);

 

If it still doesn’t work on your end, perhaps you might be using New Survey Experience.


Simple layout would be something like this :

Qualtrics.SurveyEngine.addOnReady(function () {
var nextButton = document.getElementById("next-button");
if (nextButton) nextButton.style.display = "none";
var pages = document.querySelectorAll("#page");
pages.forEach(function (el) {
["mouseover", "change", "click"].forEach(function (evtType) {
el.addEventListener(evtType, function () {
if (nextButton) nextButton.style.display = "none";
var qid2 = document.getElementById("question-QID2");
if (qid2 && qid2.offsetParent !== null) {
nextButton.style.display = "flex";
}
});
});
});
});

 


Leave a Reply