Turn off the next button | XM Community
Skip to main content

Hi
I need to turn off the next button until the first question is answered.
I need the button to be displayed but in a different color and not active.


Could you just require a response to the first question using the built-in Response Requirements?


I already have this question as mandatory, however due to client requirements i also need to generate this change.


Hi there, try adding the below to the Onload section of your first question's JavaScript:
jQuery("#NextButton").css('background-color','red');

this.disableNextButton();

QBody = document.querySelector('.QuestionBody');

QBody.addEventListener("click", () => {
    this.enableNextButton();
});


Hi Tom_1842
i am getting this error:
Invalid JavaScript! You cannot save until you fix all errors: Unexpected end of input.
Not sure why 😔


Erikahuer Hmm, you might be missing a });, try replacing the entire question JS with the below:
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/

jQuery("#NextButton").css('background-color','red');

this.disableNextButton();

QBody = document.querySelector('.QuestionBody');

QBody.addEventListener("click", () => {
this.enableNextButton();
});    

});


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*/

});


Sadly it is not working :/


Erikahuer Hmm, it is on my end... what question type are you using? If you can provide more details about your setup, or even a QSF, I might be able to see if I can replicate and fix


I am using an NPS question
Screen Shot 2022-09-14 at 15.05.06.png


Ah okay, the code I posted only works when the Question Body area is clicked, so not exactly what you were looking for anyway.
I found a thread that I think will help though. In that, rondev provides JS that will do what you want when a radio button is selected, like for an NPS question. Below for reference:
jQuery("#NextButton").css('background-color','red');

this.disableNextButton();
   
    this.questionclick = function(event,element)
    {
        if (element.type == 'radio')
        {
            this.enableNextButton();
        }
    }


Leave a Reply