How can I hide the previous and next buttons on my survey? | XM Community
Solved

How can I hide the previous and next buttons on my survey?

  • 8 December 2017
  • 13 replies
  • 3119 views

Userlevel 4
  • Qualtrics Employee
  • 24 replies
How can I hide the previous and next buttons on my survey?
icon

Best answer by AnthonyR 8 December 2017, 22:25

View original

13 replies

Userlevel 7
Badge +7
If you would like to hide them on all pages:

Open your Look and Feel Menu
Selecting the "Advanced" tab
Click on the green "Add Custom CSS" button
Paste the following in to the box that appears:

#PreviousButton, #NextButton{
display: none;
}

If you would like to hide them on a specific page of your survey:

Add the following to the JavaScript editor for the first question on the page you would like to have them hidden for:

Qualtrics.SurveyEngine.addOnReady(function () {
$('NextButton').hide();
$('PreviousButton').hide();
});
Badge +7
For me, this works in PREVIEW mode on a page with a display rule, but not from an actual anonymous link. Any idea what the problem could be? Thanks.
Badge +7
Thanks, it's working now, I had forgotten about the new publish feature. (Sorry)
Userlevel 1
Badge +1
@AnthonyR I just tried this and for some reason I still see the back button..... Can you think of a reason why? My first question is a descriptive text (the title). Should I do something different?
Userlevel 7
Badge +7
@yinbar Which version of this are you using, the css version or the question specific one?
Userlevel 1
Badge +1
@AnthonyR Thanks!
Eventually I managed to do it with:
Qualtrics.SurveyEngine.addOnload(function ()
{
//disables the next button on the page
this.hidePreviousButton();
});
Any other ideas? I've tried both @AnthonyR and @yinbar suggestions. I'm trying to get my survey's first two pages to hide the Previous and Next buttons, but to display them for the rest of the pages. I tried both the following in the JavaScript editor for the first question of both pages:

Qualtrics.SurveyEngine.addOnload(function ()
{
//disables the next button on the page
this.hidePreviousButton();
});

and

Qualtrics.SurveyEngine.addOnReady(function () {
$('NextButton').hide();
$('PreviousButton').hide();
});

I thought maybe other CSS is overriding, but the only other custom code is in the Look and Feel -> Style -> Custom CSS and seems to have nothing to do with the buttons (just the background color of the answer container:

.Skin label.SingleAnswer{background-color:#C0C0C0;}
Badge
Did you ever figure this out? I'm having the same problem.

Another way of doing this is:

Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/
jQuery("#PreviousButton").css("visibility","hidden");
});


visibility:hidden;
 also hides an element.
However, the element will still take up the same space as before. The element will be hidden, but still affect the layout. Taken from here: https://www.w3schools.com/css/css_display_visibility.asp

Badge

https://www.qualtrics.com/community/discussion/comment/689#Comment_689I'm trying to hide them on just one page - I've copied the Java Script in but it won't work on the preview - is there something else I need to do ?

ssouth I changed the "Previous" to "Next" and the code below worked for the "next button". The original version of yinbar is for hiding the "previous button".

Qualtrics.SurveyEngine.addOnload(function ()
{
//disables the next button on the page
this.hideNextButton();
});

Userlevel 1
Badge +2

Why can’t you go to the look and feel and just de select the buttons or remove the text. Can do this by block as well. or create a button and just make it the same color as your background with no text.

Badge +1

I am running into an odd issue. I am using JavaScript to hide the Next button until someone interacts with the question and the validation check is met. This is being used on constant sum questions. The script works fine (see script below), however, if there are two or more constant sum questions in sequence, although with a page break between each question, the script won’t automatically disable the Next button for all subsequent questions. Interestingly, the button will become disabled when someone interacts with the subsequent questions but the issue is that if someone does not interact with the question at all and chooses to hit the Next button, they will be able to skip that question.

I was trying to figure out what the issues was, and to make things weirder (and clearer at the same time), the issue persists only if the questions with the JavaScript I described are in consecutive pages. If I add a a question in between the two constant sum questions and each question has its own page, then the script does its job and works fine. Essentially, the issue only rises when the constant sum questions are in consecutive pages. I’ve added hidden questions in between but that does not fix the issue.
I cannot add the validation check ‘Must total to 100’ because I am using that feature for another validation check I need.

Any suggestions?
 

Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/
this.hideNextButton();

});

Qualtrics.SurveyEngine.addOnReady(function () {
    let quest = this,
        qc = quest.questionContainer,
        id = quest.questionId,
        total_box = qc.querySelector("#" + id + "_Total");

    total_box.oninput = function () {
        quest.disableNextButton();

        if (total_box.value == 100) quest.enableNextButton();
        if (total_box.value == 100) quest. showNextButton();

    };
});

Leave a Reply