"Other" Text Entry | Experience Community
Skip to main content
Question

"Other" Text Entry

  • January 28, 2026
  • 3 replies
  • 21 views

Forum|alt.badge.img+1

I have a multiple-choice question with “Other (please specify)” at the end of the choices. I’m able to achieve each goal independently using JavaScript but can’t seem to get it to work altogether.

I need help with the following:

  1. Make Text Entry box appear when “Other” is initially selected
  2. Keep the Text Entry box open after “Other” is initially selected 
  3. Clear any text entry when “Other” is deselected 

Is this possible?

3 replies

arunxmarchitect
Level 3 ●●●
Forum|alt.badge.img+4

@mross, This is possible using Javascript. Could you please share your existing script?


Romanoman
Level 3 ●●●
Forum|alt.badge.img+9
  • Level 3 ●●●
  • January 29, 2026

Do I understand correctly you want something like the standard “Allow Text Entry” functionality, but with clearing the data on deselecting? Or do you really want to achieve a text entry box that isn’t there, only appears on clicking the “Other”, and then is staying visible?

 

Because for the standard one, hiding the text entry box could be done just with the CSS, no script would be needed, and the fact it can again disappear on deselection does not sound like a bad idea.

I tried to extend the addOnReady function for a dedicated question so it hides and empties the box whenever it is not selected, but I am not completely sure that is what you’re after:

Qualtrics.SurveyEngine.addOnReady(function () {
// Helper: label -> its adjacent text input/textarea
function getTextFieldForLabel(label) {
const next = label.nextElementSibling;
if (!next) return null;
const tag = next.tagName.toLowerCase();
return (tag === 'input' || tag === 'textarea') ? next : null;
}

// Find SA/MA labels in the current question
const labels = document.querySelectorAll(
'.Skin label.SingleAnswer, .Skin label.MultipleAnswer'
);

labels.forEach((label) => {
const field = getTextFieldForLabel(label);
if (!field) return;

// Hide by default via inline styles
field.style.display = 'none';
field.style.boxSizing = 'border-box';

// Apply visual & value state based on q-checked
const applyState = () => {
const isChecked = label.classList.contains('q-checked');

if (isChecked) {
field.style.display = 'inline-block'; // or 'block' for full width
} else {
// Hide and clear on deselection
field.style.display = 'none';

// Clear the value (input or textarea)
// Use value = '' to reset user text
if (field.value !== '') {
field.value = '';
}
}
};

// Initial evaluation
applyState();

// Observe class changes on the label (Qualtrics toggles q-checked)
const mo = new MutationObserver(applyState);
mo.observe(label, { attributes: true, attributeFilter: ['class'] });

// Optional: respond immediately on click as well
label.addEventListener('click', () => setTimeout(applyState, 0));
});
});

 


Forum|alt.badge.img+1
  • Author
  • January 30, 2026

That worked Romanoman!
No further help needed. 

Thank you very much!