Show/Hide Matrix Text Entry Boxes Based on Specific Options | XM Community
Skip to main content

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("inputrtype=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 + " inputBtype=radio]").on("change", updateTextBoxes);
});


Has anyone solved something similar?

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();
	});
});

 

they still display the text box not sure if it is related with the layout. I am using the new qualtrics layout.

Yes, it is the layout. Based on the element types and class names in your post it appeared you were not using New Experience.

For New Experience, you can use the same logic flow as I did above with some adjustments, but it is more complicated.

Terms & Conditions