How to toggle display a question based on the selection from a dropdown question in the same page

SumeshsdnSumeshsdn HyderabadCommunity Member Qubie ✭
edited September 2019 in Custom Code

How to toggle display a question based on the selection from a dropdown question in the same page

Hi,

I want to toggle display an open-end question based on the selection from a dropdown question on the same page. I did manage to do this for a single choice question and below is the code. But again, this is not needed since we have an inpage display logic feature in Qualtrics. Inpage display logic is not supported for dropdown questions thus I am trying to implement it through javascript. The problem here is that I am unable to find the element type and ID for dropdown questions. Let me know if anyone did manage to implement it and if so how could it be done.

Qualtrics.SurveyEngine.addOnload(function ()
{
document.getElementById("QID8").style.display="none";

this.questionclick = function(event,element)
{
    console.log(event, element);
    if (element.type == 'radio')
    {
        var choiceNum = element.id.split('~')[2];

        var x = document.getElementById("QID8");

        if (choiceNum == 479)
        {
            x.style.display="block";
        }
        else
        {
           x.style.display="none";
        }
    }
}

});

Best Answer

  • npetrov937npetrov937 London, UK Guru ✭✭
    Accepted Answer

    There we go:

    var x = document.getElementById("QID2") //Question ID of the textbox Q
        x.style.display="none"
    
        this.questionclick = function(event, element) {
            var selectedChoice = this.getSelectedChoices()
    
            console.log(selectedChoice) //use this to get the value of the choice when you want the textbox to appear
            if (selectedChoice == "1") {
                x.style.display="block"
            }
            else {
                x.style.display="none"
            }
        }
    

Answers

  • KimothiSaurabhKimothiSaurabh DelhiCommunity Member Guru ✭✭
    edited September 2019

    "inpage display logic" works with drop down as well so would suggest to cross check it first.

    If still it is not resolved, below js may help.

    document.getElementById("QID8").style.display="none";
    
    this.questionclick = function(event,element)
    {
        console.log(event, element);
        if (element.tagName == 'SELECT')
        {
            var choiceNum = element.value
    
            var x = document.getElementById("QID8");
    
            if (choiceNum == 479)
            {
                x.style.display="block";
            }
            else
            {
               x.style.display="none";
            }
        }
    }
    
  • SumeshsdnSumeshsdn HyderabadCommunity Member Qubie ✭

    Hi Saurabh,

    When I am trying to apply In page display logic to Dropdowns the below message is shown -

    In Page Display Logic is unavailable since you are using an incompatible question type: Dropdown List

    I tried the JS you suggested and it did not work. It seems that the IF condition is not getting executed.

  • bphelpsbphelps Austin, TexasCommunity Member Qubie ✭

    Did you find a solution for this? I am attempting the same thing.

  • BSweetBSweet Community Member Qubie ✭

    Worked! Was getting stuck with the selectedChoice part. For me, I had to enter the number without the quotes.

  • sunny15sunny15 CanadaCommunity Member Qubie ✭

    This guide is super helpful. Wondering if anyone can support me in taking this code one step further. I'm trying to repeat an entire block of questions on the same page.

    The idea is that the last question on my survey is a dropdown question to the end user on whether they want to submit additional information or not. If they select "yes", then the hope is to have the entire block duplicate so they can insert another entry. The reason why I want the duplicated block to be presented on the same page is to provide the end user the opportunity to review all their entries before submission.

Sign In to Comment