Conditional "Next" button | XM Community
Skip to main content

Hello,

First of all, I have found this community to be very helpful and supportive, and have found many answers here already, so I’d like to say thank you to all who have posted solutions!

However, I have not been able to find an answer to what I am struggling with at the moment.

For my survey, on the second page of my survey, I’d like to have the “Next” button hidden, and only displayed if the user answers “Yes” to the following question which is on the same page:

Question:
Yes
No

This question is a multiple choice question with Answer type of “Allow one answer”

Thank you!

@thunderdan79 

You can use custom code to achieve this on click function.

Hope it helps.

Hi @thunderdan79 ,

You can use below code to implement the same:

 

let nextButton = jQuery('#NextButton');
   nextButton.hide();
  jQuery('#'+this.questionId+' inpututype=radio]:eq(0)').click(function() { nextButton.show(); });
  jQuery('#'+this.questionId+' inpututype=radio]:eq(1)').click(function() { nextButton.hide(); });

Hope this resolves your query😊!!

Hello, thank you both for your responses. I tried both codes and neither worked. Next button is still showing, and even doesn’t matter whether I click Yes or No, it is still showing.

Hi @thunderdan79 ,
If possible can you share screenshots of preview link.
And what question type are you using.
 

Its working fine for above Question.
Further, where have you copied the JS code, if you can plz elaborate so I can further help you with it.

Thank you so much qualtrics_nerd! I am using question is a multiple choice question with Answer type of “Allow one answer”

It is semi-working, like what is happening is that when I click “No” the next button appears, and if I click “No” again, it disappears. So I have to click “No” twice to make it disappear :(

Here is how I pasted your code:

 

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

});

Qualtrics.SurveyEngine.addOnReady(function()
{
let nextButton = jQuery('#NextButton');
   nextButton.hide();
  jQuery('#'+this.questionId+' input+type=radio]:eq(0)').click(function() { nextButton.show(); });
  jQuery('#'+this.questionId+' input'type=radio]:eq(1)').click(function() { nextButton.hide(); });
});

Qualtrics.SurveyEngine.addOnUnload(function()
{
    /*Place your JavaScript here to run when the page is unloaded*/

});

 

 

Hi @thunderdan79 ,

You are following the steps to the dot.
I cant seem to find any issue from this .
If possible , can you please share a test preview link having similar structure as in  your original survey .
So , I can review the issue.
 

 

Thank you so much qualtrics_nerd! I am using question is a multiple choice question with Answer type of “Allow one answer”

It is semi-working, like what is happening is that when I click “No” the next button appears, and if I click “No” again, it disappears. So I have to click “No” twice to make it disappear :(

Here is how I pasted your code:

 

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

});

Qualtrics.SurveyEngine.addOnReady(function()
{
let nextButton = jQuery('#NextButton');
   nextButton.hide();
  jQuery('#'+this.questionId+' input'type=radio]:eq(0)').click(function() { nextButton.show(); });
  jQuery('#'+this.questionId+' input#type=radio]:eq(1)').click(function() { nextButton.hide(); });
});

Qualtrics.SurveyEngine.addOnUnload(function()
{
    /*Place your JavaScript here to run when the page is unloaded*/

});

 

 

Had to try it for myself as I wanted to implement this as well. And using a multi select question with only one answer allowed and the Yes and No being the choices, it works fine for me. Strange!

Hi @qualtrics_nerd and @MattiasM, sorry for the late response. Dear @qualtrics_nerd, I would love to post the link to the form, but it’s very sensitive at the moment, thank you for understanding. However, I think I have figured out what is happening. So, I have a question 2 that appears right below the Yes/No question 1, and this question 2 is a text/graphic question type. So if “Yes” is selected in question 1, question 2 displays in page using the Qualtrics display logic with “In Page” checked.

What is happening that the code works, but only for a split second, I can see the “Next” button appear for a split second, but once the question 2 shows up, the “Next” button is gone. Even though “Yes” appears selected in question 1. What’s odd is that if I click on the “Yes” again (even though it shows it’s already selected) then the “Next” button shows up.

I hope this makes sense?

Thank you so much.

Hi @qualtrics_nerd and @MattiasM, sorry for the late response. Dear @qualtrics_nerd, I would love to post the link to the form, but it’s very sensitive at the moment, thank you for understanding. However, I think I have figured out what is happening. So, I have a question 2 that appears right below the Yes/No question 1, and this question 2 is a text/graphic question type. So if “Yes” is selected in question 1, question 2 displays in page using the Qualtrics display logic with “In Page” checked.

What is happening that the code works, but only for a split second, I can see the “Next” button appear for a split second, but once the question 2 shows up, the “Next” button is gone. Even though “Yes” appears selected in question 1. What’s odd is that if I click on the “Yes” again (even though it shows it’s already selected) then the “Next” button shows up.

I hope this makes sense?

Thank you so much.

 

I believe some other CSS or JS is overlapping with this.

Kindly check it on a fresh survey.

Leave a Reply


Terms & Conditions