Change text of Next button based on question response | XM Community
Skip to main content

I have a question, Q139, that is shown on my survey as shown in the image below: 

I would like to add Javascript so that (1) the "Next" button remains as "Next" if "Yes" is selected for Q139 and (2) the “Next” button changes to read "Submit" if "No" is selected for Q139. 

I have basic Javascript knowledge, and with the help of Google Gemini, I am trying to use the following code but it is not working:

Qualtrics.SurveyEngine.addOnReady(function() {
  const nextButton = jQuery('#NextButton');
  const yesResponse = "${q://QID139}";

  jQuery("#QID139").on("change", function() {
    if (yesResponse === "No") {
      nextButton.attr("title", "Submit").val("Submit");
    } else {
      nextButton.attr("title", "Next").val("Next");
    }
  });
});

Does anyone know what I am doing wrong? 

@happychuck77 Your question haven’t been submit yet, so calling the pipe-text answer not gonna work. Use this code instead

Qualtrics.SurveyEngine.addOnload(function() {

    this.hideNextButton();
    var that = this;

    var nextButton = jQuery("#NextButton");

    function updateButtonText() {
        var selectedOption = jQuery("inputptype='radio']:checked").val();

        if (selectedOption === "1") {
            nextButton.val("Next");
        } else if (selectedOption === "2") {
            nextButton.val("Submit");
        }
    }

    jQuery("inputptype='radio']").on("change", function() {
        updateButtonText();
        that.showNextButton(); 
    });

    updateButtonText();
});

Let me know if it work

Thanks, @Nam Nguyen! So the good news is that the “Next” button is now hidden when the page loads, which is good; however, the “Next” button still reads as “Next” when “No” is selected (shows as “Next” when “Yes” is selected too).

Any other thoughts? Do I maybe need to put “Q139” in the code somewhere?

@happychuck77 Okay I guess I know what happened. Did you use to edit/delete some answer on that question? Because my code work with selectedOption so it won’t work if you did change the order.

So, make a fresh Multiple choice question, reduce the number of choice to 2 and then paste my code and your question on it. It should work like a charm.

I didn’t edit nor delete any response options on that question, no. Just to be safe, I tried just now a few times to make a fresh Multiple Choice question, and it still didn’t work. And I can verify that “Yes” is 1 and “No” is 2. 

You’ve already been so much help, @Nam Nguyen, so I don’t expect you to spend any more time on this than you have. But it is still not working --  the “Next” button always reads as “Next” no matter whether “No”  or “Yes” is selected. 😕

Through some trial and error, I got it to work with different code! Posting the final for posterity:

 

Qualtrics.SurveyEngine.addOnReady(function() {
  const nextButton = jQuery('#NextButton');
  const qid139 = jQuery("#QID139");

  // Hide the Next button initially
  nextButton.hide();

  // Add a change listener to QID139
  qid139.on("change", function() {
    const selectedOption = qid139.find(":checked").val();

    if (selectedOption === "1") {
      nextButton.val("Next").show();
    } else if (selectedOption === "2") {
      nextButton.val("Submit").show();
    }
  });
});

 

Leave a Reply


Terms & Conditions