Load text option for Single & Multiple choice on click | XM Community
Skip to main content
Solved

Load text option for Single & Multiple choice on click

  • January 10, 2020
  • 2 replies
  • 94 views
S
Forum|alt.badge.img
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!

Best answer by Sugra

Hi Everyone, I have got the solution to this and it is working fine for both Single and Multichoice answer with any Text entry size. Below are the codes which you need to put at a question level depending on the requirement. Hope this helps! Single answer choice JS code: Qualtrics.SurveyEngine.addOnload(function() { /*Place your JavaScript here to run when the page loads*/ }); Qualtrics.SurveyEngine.addOnReady(function() { /*Place your JavaScript here to run when the page is fully displayed*/ var QID = this.questionId; jQuery("#" + QID + " .InputText ").hide(); jQuery("#" + QID + " input[type='radio']").each(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(); } }); jQuery("#" + QID + " .Selection ").on("click change",function(){ jQuery("#" + QID + " input[type='radio']").each(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(); } }); }); }); Qualtrics.SurveyEngine.addOnUnload(function() { /*Place your JavaScript here to run when the page is unloaded*/ }); Multiple answer choice JS code: Qualtrics.SurveyEngine.addOnload(function() { /*Place your JavaScript here to run when the page loads*/ }); Qualtrics.SurveyEngine.addOnReady(function() { /*Place your JavaScript here to run when the page is fully displayed*/ var QID = this.questionId; jQuery("#" + QID + " .InputText ").hide(); jQuery("#" + QID + " input[type='checkbox']").each(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(); } }); jQuery("#" + QID + " .Selection ").on("click change",function(){ jQuery("#" + QID + " input[type='checkbox']").each(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(); } }); }); }); Qualtrics.SurveyEngine.addOnUnload(function() { /*Place your JavaScript here to run when the page is unloaded*/ });

2 replies

S
Forum|alt.badge.img
  • Sugra
  • Author
  • Answer
  • January 10, 2020
Hi Everyone, I have got the solution to this and it is working fine for both Single and Multichoice answer with any Text entry size. Below are the codes which you need to put at a question level depending on the requirement. Hope this helps! Single answer choice JS code: Qualtrics.SurveyEngine.addOnload(function() { /*Place your JavaScript here to run when the page loads*/ }); Qualtrics.SurveyEngine.addOnReady(function() { /*Place your JavaScript here to run when the page is fully displayed*/ var QID = this.questionId; jQuery("#" + QID + " .InputText ").hide(); jQuery("#" + QID + " input[type='radio']").each(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(); } }); jQuery("#" + QID + " .Selection ").on("click change",function(){ jQuery("#" + QID + " input[type='radio']").each(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(); } }); }); }); Qualtrics.SurveyEngine.addOnUnload(function() { /*Place your JavaScript here to run when the page is unloaded*/ }); Multiple answer choice JS code: Qualtrics.SurveyEngine.addOnload(function() { /*Place your JavaScript here to run when the page loads*/ }); Qualtrics.SurveyEngine.addOnReady(function() { /*Place your JavaScript here to run when the page is fully displayed*/ var QID = this.questionId; jQuery("#" + QID + " .InputText ").hide(); jQuery("#" + QID + " input[type='checkbox']").each(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(); } }); jQuery("#" + QID + " .Selection ").on("click change",function(){ jQuery("#" + QID + " input[type='checkbox']").each(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(); } }); }); }); Qualtrics.SurveyEngine.addOnUnload(function() { /*Place your JavaScript here to run when the page is unloaded*/ });
rondev
JoycaV
N
Forum|alt.badge.img+1
  • NateC
  • March 16, 2022

This is great!!! However, it doesn't appear to work if you are using columns for your answer choices. Does anyone have a solution that will work with columns?

Terms & ConditionsAccessibility statement