How to toggle display a question based on the selection from a dropdown question in the same page | XM Community
Skip to main content
Solved

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

  • September 5, 2019
  • 6 replies
  • 304 views
S
Level 1 ●
Forum|alt.badge.img+6
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 by npetrov937

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" } }

6 replies

K
Level 3 ●●●
Forum|alt.badge.img+18
  • KimothiSaurabh
  • Level 3 ●●●
  • September 10, 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"; } } }
Kimothi
S
Level 1 ●
Forum|alt.badge.img+6
  • Sumeshsdn
  • Author
  • Level 1 ●
  • September 11, 2019
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.
B
  • bphelps
  • December 30, 2019
Did you find a solution for this? I am attempting the same thing.
npetrov937
Level 2 ●●
Forum|alt.badge.img+4
  • npetrov937
  • Level 2 ●●
  • Answer
  • January 1, 2020
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" } }
S
B
Forum|alt.badge.img+1
  • BSweet
  • June 17, 2020

https://www.qualtrics.com/community/discussion/comment/20799#Comment_20799Worked! Was getting stuck with the selectedChoice part. For me, I had to enter the number without the quotes.

S
  • sunny15
  • July 14, 2020

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.

Terms & ConditionsAccessibility statement