How can I make text box in a matrix question appear only when its clicked? | XM Community
Skip to main content
Question

How can I make text box in a matrix question appear only when its clicked?

  • March 20, 2021
  • 1 reply
  • 430 views
J

I have a matrix question of Likert type. I have 4 statements, but I also have to allow the respondent for a text entry and then rate that in the Likert scale. The text entry box of the "others please specify:" should be hidden until is clicked. Also, I want the text to be cleared as soon as the respondent chooses another statement. I have a java code that runs well for the multiple choice question with a other 's please specify box. I tried to change that code as per matrix but its not working. Any suggestions please.
User:


1 reply

Tom_1842
Level 8 ●●●●●●●●
Forum|alt.badge.img+28
  • Tom_1842
  • Level 8 ●●●●●●●●
  • November 11, 2022

Hi there, if you still need, I was able to put something like this in place by using the below code. Create a matrix question and add a text entry to the 3rd statement and then add the below to the OnReady of the question's JavaScript. The textbox var corresponds to the row number (row 3 = ~3~TEXT), while the "tr" correspond to the row number minus 1 (row 3 = tr:eq(2)). 
Matrix_OtherWriteInDisplay.pngvar qid = this.questionId;
var text = document.getElementById("QR~"+qid+"~3~TEXT");

jQuery(text).css("display","none");

jQuery("#"+qid+" tbody tr:eq(0)").on("click , touchstart", function() {
jQuery(text).css("display","none");
});

jQuery("#"+qid+" tbody tr:eq(1)").on("click , touchstart", function() {
jQuery(text).css("display","none");
});

jQuery("#"+qid+" tbody tr:eq(2)").on("click , touchstart", function() {
jQuery(text).css("display","block");
});
The width of the text box affects the width of the first column and so the whole table adjusts when it appears/disappears. This can be tackled by using CSS to adjust the minimum width of the first column or using a visibility property instead of display. Instead, I think a similar effect can be achieved by adding a Text Entry question after the matrix table and use in-page display logic to only display if it if any of the answer options from the 'Other' row are selected. The question might look something like the below in the Builder:
Matrix_OtherWriteInDisplay2.png

Terms & ConditionsAccessibility statement