Can I use Javascript to convert Text Entry > Form question to a drop down selection? | XM Community
Skip to main content
Solved

Can I use Javascript to convert Text Entry > Form question to a drop down selection?

  • December 5, 2018
  • 4 replies
  • 136 views
J
I have a Text Entry > Form question on a survey, with about 10 component questions in it (e.g. Name, Project Title, Phone, Email, etc.). They all require text response. I want to convert two of those component questions to drop down lists, because the responses should be limited to pre-determined values. Is it possible to use JS on the form question to target those two components and convert their response types to drop downs? Or is there a non-coding possibility that would make this possible while still maintaining the form question type? Or should I just remove the form question and make all the components their own questions (assigning MC > Drop down to the two in question)? Thank you!

Best answer by Anonymous

Hello @JonathonJames , We can achieve this using JS - Hide the Input text of those two question and replace it with Select element, then on change event of select option set the selected option text to hidden text field. Paste the below code in the js(OnReady) of the form question type. var that=this.questionId; var element="<select id='s1'><option ></option><option value='1'>option 1.1</option><option value='2'>option 1.2</option></select>"; jQuery(element).insertAfter("#"+that+" .InputText:eq(4)"); var element="<select id='s2'><option ></option><option value='1'>option 2.1</option><option value='2'>option 2.2</option></select>"; jQuery(element).insertAfter("#"+that+" .InputText:eq(5)"); jQuery("#"+that+" .InputText:eq(4)").hide(); jQuery("#"+that+" .InputText:eq(5)").hide(); jQuery("#"+that+" .InputText:eq(4)").val(jQuery("#s1 option:selected").text()); jQuery("#"+that+" .InputText:eq(5)").val(jQuery("#s2 option:selected").text()); jQuery("#s1").on('change',function(){ jQuery("#"+that+" .InputText:eq(4)").val(jQuery("#s1 option:selected").text()); }); jQuery("#s2").on('change',function(){ jQuery("#"+that+" .InputText:eq(5)").val(jQuery("#s2 option:selected").text()); }); So the above code will hide the 5th and 6th form filed input text and replace it with drop-down.

4 replies

A
  • Anonymous
  • Answer
  • December 5, 2018
Hello @JonathonJames , We can achieve this using JS - Hide the Input text of those two question and replace it with Select element, then on change event of select option set the selected option text to hidden text field. Paste the below code in the js(OnReady) of the form question type. var that=this.questionId; var element="<select id='s1'><option ></option><option value='1'>option 1.1</option><option value='2'>option 1.2</option></select>"; jQuery(element).insertAfter("#"+that+" .InputText:eq(4)"); var element="<select id='s2'><option ></option><option value='1'>option 2.1</option><option value='2'>option 2.2</option></select>"; jQuery(element).insertAfter("#"+that+" .InputText:eq(5)"); jQuery("#"+that+" .InputText:eq(4)").hide(); jQuery("#"+that+" .InputText:eq(5)").hide(); jQuery("#"+that+" .InputText:eq(4)").val(jQuery("#s1 option:selected").text()); jQuery("#"+that+" .InputText:eq(5)").val(jQuery("#s2 option:selected").text()); jQuery("#s1").on('change',function(){ jQuery("#"+that+" .InputText:eq(4)").val(jQuery("#s1 option:selected").text()); }); jQuery("#s2").on('change',function(){ jQuery("#"+that+" .InputText:eq(5)").val(jQuery("#s2 option:selected").text()); }); So the above code will hide the 5th and 6th form filed input text and replace it with drop-down.
J
J
Hello @Shashi Thank you very much for your reply! That makes a lot of sense. I'm a newbie at JS but your response at least gave me the place to start. I'll do further research into using Select and start putting the code together (hopefully). Thank you again!
E
Forum|alt.badge.img+3
  • everman
  • January 2, 2019
Do you know how this would impact data export using the Legacy API? If we create a new form element and hide the known id, is there an affect on the export? Thank you.
A
  • Anonymous
  • January 2, 2019
> @ncoppola said: > Do you know how this would impact data export using the Legacy API? If we create a new form element and hide the known id, is there an affect on the export? Thank you. It will have no impact on the Legacy API export as we are assigning the value to the text box created by qualtrics.
Terms & ConditionsAccessibility statement