Question

Show/Hide Matrix Text Entry Boxes Based on Specific Options

Forum|Forum|3 months ago
August 13, 2025
3 replies
51 views

+8

Erikahuer
QPN Level 4 ●●●●

Hi everyone,

I have a matrix-type question in Qualtrics where each row has a set of radio button options (Extremamente satisfeito, Satisfeito, Neutro, Insatisfeito, Nada satisfeito), and also an open text box directly under the row label.

What I’m trying to do is:

Keep all the text boxes hidden by default.
Show the text box only when the respondent selects “Insatisfeito” or “Nada satisfeito” (columns 1 or 2 from the left in my case).
If the respondent changes their selection to something else, hide the text box again and clear its value.

I’ve tried some JavaScript in the “AddOnload” section, but the text boxes still appear when the page loads or don’t hide/show reliably. I suspect it’s because Qualtrics renders these inputs in a <th> tag and they’re visible before my script runs.

Here’s my current code attempt (not working as expected):

Qualtrics.SurveyEngine.addOnload(function () {
var qid = this.getQuestionInfo().QuestionID;

jQuery("#" + qid + " .TextEntryBox").css("display", "none");

function updateTextBoxes() {
jQuery("#" + qid + " tbody tr").each(function () {
var $row = jQuery(this);
var $selected = $row.find("input[type=radio]:checked");
var $textBox = $row.find(".TextEntryBox");

if ($selected.length > 0) {
var colClass = $selected.closest("td").attr("class") || "";
if (colClass.includes("c7") || colClass.includes("c8")) {
$textBox.show();
} else {
$textBox.hide().val("");
}
} else {
$textBox.hide().val("");
}
});
}

updateTextBoxes();

jQuery("#" + qid + " input[type=radio]").on("change", updateTextBoxes);
});

Has anyone solved something similar?

+27

TomG
Level 8 ●●●●●●●●
Forum|Forum|3 months ago
August 14, 2025

Try this:

Qualtrics.SurveyEngine.addOnload(function() {
	var q = jQuery(this.getQuestionContainer());
	q.find(".TextEntryBox").hide();
	var radios = q.find("input[type=radio]");
	radios.filter(":checked").each(function() { //support back button
		if(this.value=="4" || this.value=="5") jQuery(this).closest("tr").find(".TextEntryBox").show();
	});
	radios.click(function() {
		var text = jQuery(this).closest("tr").find(".TextEntryBox");
		if(this.value=="4" || this.value=="5") text.show();
		else text.val("").hide();
	});
});