Best practices around the use of a Text field within a list | XM Community

Best practices around the use of a Text field within a list

  • 8 November 2018
  • 4 replies
  • 24 views

Userlevel 1
Badge
Currently we have a question set up where 'Other' is an option. If selected the user has to fill out the text box below. I am struggling to find a way to display the textbook, ONLY when the option is selected without it being a separate question. Is this possible?

It's only because if you select another answer, you can still click and the into the 'Other' text area. It doesn't allow you to proceed, but I feel this could be avoided.

If anyone has any solutions I would be grateful. Thanks

4 replies

Hello @Amara ,

Paste the below code in the js(OnReady) of the multichoice question
Assuming you have only one "other" option in that question(also, Question type is simgle choice)

var that=this.questionId;
jQuery("#"+that+" .InputText").hide();
var n= jQuery("#"+that+" .InputText").attr('id');
var choicenumber=n.split("~")[2];
jQuery("#"+ this.questionId+" input[type='radio']").on('change',function(){
if(jQuery("[id='QR~"+that+"~"+choicenumber+"']").prop('checked')){
jQuery("#"+that+" .InputText").show();
}else{
jQuery("#"+that+" .InputText").hide().val('');
}
});
Userlevel 7
Badge +27
We handle this with a JS function for single and multi-select MC questions that blanks out text entry boxes as needed when: a choice (exclusive or non-exclusive) is clicked, an exclusive text entry field is clicked, or a non-exclusive entry field is clicked. It also focuses on a text input when its choice selected. It automatically finds the text input fields and the exclusive choices in the question. It also does some formatting by moving the text boxes inside the label buttons and sizing the text inputs and the label buttons. It works with MC questions in vertical, horizontal or column format.

We've been successfully using it and improving on it for several years.

It's not something we give away, but feel free to contact me for more info. Alternatively, you could write your own JS to do similar things.
Userlevel 1
Badge
Hi Tom, This sounds interesting. If I am completely honest, I did expect this to be standard out of the box from Qualtrics. It seems like there's quite a few improvements such as this one that would really make them stand out from other competitors.

For now I'm using Shashi's code and seems to be doing exactly what I wanted, but thank you for taking the time explaining what you have developed - it sounds like great UX!

> @TomG said:
> We handle this with a JS function for single and multi-select MC questions that blanks out text entry boxes as needed when: a choice (exclusive or non-exclusive) is clicked, an exclusive text entry field is clicked, or a non-exclusive entry field is clicked. It also focuses on a text input when its choice selected. It automatically finds the text input fields and the exclusive choices in the question. It also does some formatting by moving the text boxes inside the label buttons and sizing the text inputs and the label buttons. It works with MC questions in vertical, horizontal or column format.
>
> We've been successfully using it and improving on it for several years.
>
> It's not something we give away, but feel free to contact me for more info. Alternatively, you could write your own JS to do similar things.
Userlevel 1
Badge
Hi Shashi,

Thank you this worked perfectly, the text box within the radio button list is now hidden until the 'other' option is selected.

Do you know if it's possible to get the JS code to work with a text box that is larger than just one line? i.e. multi line?

Thanks,
Adam


> @Shashi said:
> Hello @Amara ,
>
> Paste the below code in the js(OnReady) of the multichoice question
> Assuming you have only one "other" option in that question(also, Question type is simgle choice)
>
> var that=this.questionId;
> jQuery("#"+that+" .InputText").hide();
> var n= jQuery("#"+that+" .InputText").attr('id');
> var choicenumber=n.split("~")[2];
> jQuery("#"+ this.questionId+" input[type='radio']").on('change',function(){
> if(jQuery("[id='QR~"+that+"~"+choicenumber+"']").prop('checked')){
> jQuery("#"+that+" .InputText").show();
> }else{
> jQuery("#"+that+" .InputText").hide().val('');
> }
> });

Leave a Reply