Load text option for multiple choice on click | XM Community
Solved

Load text option for multiple choice on click

G
Badge +1
Hey guys!
I have tried programming a question to only display the textbox for a given choice when its clicked, as all of my multiple choices have a text entry associated with them that has to be filled out. Do you guys know of any way to have every multiple choice have a text entry that has a force response once its chosen, but only shows up once the choice has been clicked?
icon

Best answer by MohammedAli_Rajapkar 27 August 2018, 22:06

View original

23 replies

Akdashboard
Rank
Userlevel 7
Badge +6
What your doing sounds correct, just make sure to check the "in page" box when editing display logic.
G
Badge +1
@Akdashboard I was trying via JQuery, as the problem is that I need to have all multiple choices listed, but only show up the text entry once the choices are clicked. Can't seem to figure out how to do that.
A
Hello @GabrielRibeiro ;

Just copy the following code in the `js(onReady)` of the multiple choice question

jQuery('input:text').hide();
jQuery("[type='checkbox']").change(function(){
if(jQuery(this).prop("checked") == true){
var v1 = jQuery(this).attr("id");
jQuery("[id*='"+v1+"~TEXT']").show();
}else{
var v1 = jQuery(this).attr("id");
jQuery("[id*='"+v1+"~TEXT']").val('');
jQuery("[id*='"+v1+"~TEXT']").hide();
}

});
MohammedAli_Rajapkar
Rank
Userlevel 7
Badge +20
This is doable.

- Add "Other text box" for each option
- Hide all "Other text box" (Through JavaScript)
- Then show the "Other text box" to the respective choice selected.
- You can look for the "id" for "checkbox" and its "other specify box". It should look something similar

Let me know if you have any query.
Regards, Mohammed Ali
G
Badge +1
> @Shashi said:
> Hello @GabrielRibeiro ;
>
> Just copy the following code in the `js(onReady)` of the multiple choice question
>
> jQuery('input:text').hide();
> jQuery("[type='checkbox']").change(function(){
> if(jQuery(this).prop("checked") == true){
> var v1 = jQuery(this).attr("id");
> jQuery("[id*='"+v1+"~TEXT']").show();
> }else{
> var v1 = jQuery(this).attr("id");
> jQuery("[id*='"+v1+"~TEXT']").val('');
> jQuery("[id*='"+v1+"~TEXT']").hide();
> }
>
> });
>
>

@Shashi I tried this but for some reason when I click the option the text box does not appear. The goal is to have 5-6 options that are clickable, and once one of them is clicked a text box appears right underneath! Thanks!
MohammedAli_Rajapkar
Rank
Userlevel 7
Badge +20
Here is the link to check and attached is the QSF:

https://qimpl.az1.qualtrics.com/jfe/preview/SV_1ERtNbpTcKe7uwl?Q_SurveyVersionID=current&Q_CHL=preview
Regards, Mohammed Ali
G
Badge +1
@Mohammedali_Rajapakar_Ugam thanks! For some reason this code is not working for me... the text entries do not show up when the page loads, but they don't show up on click either.
MohammedAli_Rajapkar
Rank
Userlevel 7
Badge +20
Is the survey link (below) working fine for you?

https://qimpl.az1.qualtrics.com/jfe/preview/SV_1ERtNbpTcKe7uwl?Q_SurveyVersionID=current&Q_CHL=preview
Regards, Mohammed Ali
G
Badge +1
@Mohammedali_Rajapakar_Ugam the survey is working yes, but for some reason when I copy the query to the questions in my own, it doesn't work. The questions have between 5-6 options, all with text entries with force response. They are part of display logics and I used the multiple choice, multiple answer question. Also for some reason if I change the text entry from small to medium instead of not displaying any (even on click) it displays all of them from load. Does that help?
MohammedAli_Rajapkar
Rank
Userlevel 7
Badge +20
Can you share the "QSF" of your project?
Regards, Mohammed Ali
G
Badge +1
@Mohammedali_Rajapakar_Ugam For confidentiality reasons I am unable to do that, unfortunately. What happens with those questions is that when I click the text entry does not appear but then I can't move on because of the force response, which asks for a response on the text entry.
G
Badge +1
@Mohammedali_Rajapakar_Ugam Let me elaborate: I have one question that has 5 options, the last of which has a text entry. The JQuery for that one works perfectly: when it loads, there is no texty entry. When I select the last one, the text entry appears. When I deselect, it disappears. And that one comes after two display logic questions, on the third page.
However, on the fourth page, there are two questions that come from another extra display logic that should have 6 options (but that might change) each with a text entry. However, when the page loads the text entries either already show up (when I make them medium size) or they never show up at all but force validation doesn't let me move on as I haven't typed anything.
Do you know what's going on?
MohammedAli_Rajapkar
Rank
Userlevel 7
Badge +20
So, both the question options have "text entry"?
If Yes, then you will have to paste the same code in for both questions...
If your question is "single select" then you will have to change "checkbox" to "radio" in JavaScript code.

In below survey, the first page has 1 question (multi-select), 2nd page has 2 questions (multi-select) and the 3rd page has 1 question (single select)

https://qimpl.az1.qualtrics.com/jfe/preview/SV_1ERtNbpTcKe7uwl?Q_SurveyVersionID=current&Q_CHL=preview

attached is the QSF (the JavaScript code is updated)
Regards, Mohammed Ali
A
> @GabrielRibeiro said:
> > @Shashi said:
> > Hello @GabrielRibeiro ;
> >
> > Just copy the following code in the `js(onReady)` of the multiple choice question
> >
> > jQuery('input:text').hide();
> > jQuery("[type='checkbox']").change(function(){
> > if(jQuery(this).prop("checked") == true){
> > var v1 = jQuery(this).attr("id");
> > jQuery("[id*='"+v1+"~TEXT']").show();
> > }else{
> > var v1 = jQuery(this).attr("id");
> > jQuery("[id*='"+v1+"~TEXT']").val('');
> > jQuery("[id*='"+v1+"~TEXT']").hide();
> > }
> >
> > });
> >
> >
>
> @Shashi I tried this but for some reason when I click the option the text box does not appear. The goal is to have 5-6 options that are clickable, and once one of them is clicked a text box appears right underneath! Thanks!

I hope you are using multichoice with multi answer option and with "Allow text Entry option with force response"
G
Badge +1
@Shashi for some I was, for others I was using the single choice! @Mohammedali_Rajapakar_Ugam helped me by using either checkbox or radio as type, and that worked out perfectly, thanks!
E
Userlevel 1
Badge +3
Hello all,

I have to say your code worked perfectly. I just have two questions. How can I improve your code so the following two things happen:

1) If I select one alternative, it displays the text box, but then if I select another alternative the first textbox doesnt dissapear. And if I wrote something in the first selected textbox, then the questionnaire doesnt let me go forward because it realizes that there is text in an option that was not selected. Is there a way to cancell any text written in non selected options and to hide them after they were unselected?

2) How can I add some additional text that shows with the textbox only after click? In my case my single choice are images, but I would like to display "how many would you like to buy?" only after the selection of the image has been made. Is this possible somehow?

Thank you
A
Hello @ecd921 ,

Hope the following code will help you: Add the following js in js(onReady) of your question:

jQuery('input:text').hide();
jQuery("[type='radio']").change(function(){
if(jQuery(this).prop("checked") == true){
var v1 = jQuery(this).attr("id");
jQuery("[id*='"+v1+"~TEXT']").show();
jQuery("[id*='"+v1+"~TEXT']").attr("placeholder", " how many gramms/pounds you would like to buy?");
jQuery("[id*='"+v1+"~TEXT']").css('width',500);

jQuery("[type='text']").not("[id*='"+v1+"~TEXT']").hide();
}else{
var v1 = jQuery(this).attr("id");
jQuery("[id*='"+v1+"~TEXT']").val('');
jQuery("[id*='"+v1+"~TEXT']").hide();
}

});


If you have multi select then use below code :

jQuery('input:text').hide();
jQuery("[type='checkbox']").change(function(){
if(jQuery(this).prop("checked") == true){
var v1 = jQuery(this).attr("id");
jQuery("[id*='"+v1+"~TEXT']").show();
jQuery("[id*='"+v1+"~TEXT']").attr("placeholder", " how many gramms/pounds you would like to buy?");
jQuery("[id*='"+v1+"~TEXT']").css('width',500);

jQuery("[type='text']").not("[id*='"+v1+"~TEXT']").hide();
}else{
var v1 = jQuery(this).attr("id");
jQuery("[id*='"+v1+"~TEXT']").val('');
jQuery("[id*='"+v1+"~TEXT']").hide();
}

});
MohammedAli_Rajapkar
Rank
Userlevel 7
Badge +20
Can you please check below link...I believe you have a single select (multi-choice) question...

So, both the question options have "text entry"?
If Yes, then you will have to paste the same code in for both questions...
If your question is "single select" then you will have to change "checkbox" to "radio" in JavaScript code.

In below survey, the first page has 1 question (multi-select), 2nd page has 2 questions (multi-select) and the 3rd page has 1 question (single select)

https://qimpl.az1.qualtrics.com/jfe/preview/SV_1ERtNbpTcKe7uwl?Q_SurveyVersionID=current&Q_CHL=preview
Regards, Mohammed Ali
K
This Java code doesn't work for a Matrix that allows multiple response with an exclusive none option. Can you provide the revised code for this question type?
S
Badge
Hi Everyone,

I have a survey where I want the text entry box to be displayed when the customer clicks on the 'Other' radio button and hides when unclicks it. I tried the below code. It is working fine but it is not helping to hide the text box again when customer unclick the 'Other' option

jQuery('input:text').hide();
jQuery("[type='checkbox']").change(function(){
if(jQuery(this).prop("checked") == true){
var v1 = jQuery(this).attr("id");
jQuery("[id*='"+v1+"~TEXT']").show();
}else{
var v1 = jQuery(this).attr("id");
jQuery("[id*='"+v1+"~TEXT']").val('');
jQuery("[id*='"+v1+"~TEXT']").hide();
}

});

Can someone help, please? Much appreciated!
Akdashboard
Rank
Userlevel 7
Badge +6
@Sugra
Why not just use Qualtrics' In-page display logic that exists native to the tool?

Also, you should start a new thread instead of tacking on to this thread from 2018.
TomG
Rank
Userlevel 7
Badge +27
@Sugra - start a new thread.
S
Badge
I have started a new thread. Thank you, everyone.

Leave a Reply


Terms & Conditions