How to remove a radio button for the text entry within multiple choice question and keep the radio buttons for the other options | XM Community
Skip to main content

I would like to make my multiple choice question look similar to this (this was made using another survey software). 

The text entry should not have a radio button. The other responses should have radio buttons.

I want to ensure the text entry still acts as a exclusive response (i.e., you should NOT have to click another response in addition to fill out the text entry)

Thanks!

Hi ​@Makgomes ,

For hiding the label, add JavaScript to your question.

Qualtrics.SurveyEngine.addOnload(function()
{
/*Change this WORD to the choice text above the text entry*/
/*jQuery("#" + this.questionId + " label:contains('WORD')").hide();*/
var qid = this.questionId;
jQuery("#" + qid + " label:contains('WORD')").hide();
jQuery("#" + qid + " inputptype='text']").removeAttr("title");
});

Note: it searches for label that contain the term, so it may hide other choices if other choices contain the same term.

 

However, there will be an error message (You have added text into an unselected answer choice. Please select the answer choice or remove the text.) if the text entry is not cleared and another choice is selected.

I am unsure on how to clear the text entry to make it exclusive.


Thank you. That worked!

 

I added additional code so that when someone starts typing in the box, it deselects the other options. However, if I write something in the box and then select another response (e.g., “don’t know), the text remains.

Is there a way to program the question so the text deletes if another option (e.g., “don’t know”) is chosen after someone writes in the box? If people write in the box and then click another option, they get an error (i.e., qualtrics doesn’t allow it) , but I rather have it so that the text is deleted to avoid confusion. 

 

This is the code:


Qualtrics.SurveyEngine.addOnload(function() {
    /* 'postal_code' is the hidden keyword for Qualtrics to know which option to hide the radio button. 
       Whatever text you put before the text entry is what you should put here. The text will be hidden in preview */
    jQuery("#" + this.questionId + " label:contains('Postal_code')").hide();
});

Qualtrics.SurveyEngine.addOnload(function() {
    // Get the text entry field
    var textEntryField = document.querySelector('inputotype="text"]');
    
    // Ensure the text entry field exists
    if (textEntryField) {
        // Adjust the size using inline styles
        textEntryField.setAttribute("style", "width: 100px; height: 30px;"); // Set width and height
    }

    // Get the radio buttons for the other two responses
    var radioButtons = document.querySelectorAll('inputrtype="radio"]');
    
    // Add an event listener to the text entry field
    textEntryField.addEventListener('input', function() {
        // Loop through the radio buttons and uncheck them
        radioButtons.forEach(function(radioButton) {
            radioButton.checked = false;
        });
    });
});

 

This is what I am trying to avoid:

 


Hi ​@Makgomes ,

 

With ChatGPT’s help and some trial and error,

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

// Hide the label containing 'Postal_code'
jQuery("#" + qid + " label:contains('Postal_code')").hide();

// Get the text entry field
var textEntryField = document.querySelector("#" + qid + " input type='text']");

// Get all radio buttons
var radioButtons = document.querySelectorAll("#" + qid + " input type='radio']");

// When user types in the text field, uncheck all radio buttons
if (textEntryField) {
// Adjust the size using inline styles
textEntryField.setAttribute("style", "width: 100px; height: 30px;"); // Set width and height
textEntryField.addEventListener('input', function() {
radioButtons.forEach(function(radioButton) {
radioButton.checked = false;
});
});
}

// When any radio button is selected, clear the text field
radioButtons.forEach(function(radioButton) {
radioButton.addEventListener('change', function() {
if (textEntryField) {
textEntryField.value = '';
}
});
});
});

 


It works! Thank you again!!


Leave a Reply