How do I hide next button for specific questions on same page? Show when answer is selected only

DeahnaDeahna TexasCommunity Member Qubie ✭
edited June 2020 in Custom Code

How do I hide next button for specific questions on same page? Show when answer is selected only

Hello,

I found code to hide the next button for the entire page but I need to hide the next button on specific questions that are on the same page and ONLY display the next button when user selects a specific answer choice (A,B,C, or D).

For example, if user selects "yes this answered my question", then no next button, but if user selects "I need to open a case" I need the next button to appear so they can advance to the next page and submit a case.

Thanks so much!!

Answers

  • rondevrondev Community Member - Trial User Wizard ✭✭✭✭✭

    You can try the below code: The below code is for single choice with two options, like if option2 is selected then next button is enabled else kept disabled.

    Paste the below code in the JS onReady function.

     this.disableNextButton();
        //question click is a simple onclick handler
        //attached to the question's container div
        this.questionclick = function(event,element)
        {
            //by default you get the click event as the first parameter and the clicked element as the second parameter
            console.log(event, element);
            if (element.type == 'radio')
            {
                var choiceNum = element.id.split('~')[2];
                //alert('You clicked on choice '+choiceNum);
                if (choiceNum == 2)
                {
                    //enables the next button - Note that the QuestionData object is bound to this to make it easier to use
                    this.enableNextButton();
                }
                else
                {
                    //disables the next button
                    this.disableNextButton();
                }
            }
        }
    


  • SurajKSurajK IndiaCommunity Member Sage ✭✭✭
    edited June 2020
  • DeahnaDeahna TexasCommunity Member Qubie ✭

    Thank you both! If it is a single questions with 4 choices and option 4 is selected would I just change both 2's to 4's in the above code like below:

      var choiceNum = element.id.split('~')[4];
                //alert('You clicked on choice '+choiceNum);
                if (choiceNum == 4)
    


  • rondevrondev Community Member - Trial User Wizard ✭✭✭✭✭
  • DeahnaDeahna TexasCommunity Member Qubie ✭
    edited June 2020

    I have the code below in my survey to hide next button throughout entire survey but when I add code above to a question it does not trigger the next button to appear...did the code override one another?

    <style type="text/css">#NextButton {

     visibility: hidden;

    }

    </style>

    </div>

Sign In to Comment