Populating dropdown menu using JS loop | XM Community
Skip to main content
Solved

Populating dropdown menu using JS loop

  • September 20, 2020
  • 3 replies
  • 688 views

Forum|alt.badge.img

I was wondering if it possible to populate a dropdown list using Qualtrics API. For my questions I want survey takers to select a numbers from $0.00 to $10.00 in increments of 25 cents ($0.00, $0.25, $0.50, $0.75, ... $10.00), and I want their choice to be coded as the respective number (0, 25, 50, 75, ... 1000).
Is is possible to populate the dropdown list using JS?

For reference I've seen similar problems here:
https://www.qualtrics.com/community/discussion/4715/adding-answer-choices-to-multi-select-box-using-javascriptand I've seen the

setChoiceAnswerValue
in the API documentation but I am still not sure how to handle this.

Best answer by TomG

https://www.qualtrics.com/community/discussion/comment/30476#Comment_30476First, remove the form from your html. The Qualtrics page is already a form.
To copy the select value to the input field, you can use the addOnPageSubmit() function:
Qualtrics.SurveyEngine.addOnPageSubmit(function() {
jQuery("#"+questionId+" .InputText").val(jQuery("#m").val());
});

View original

3 replies

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • 5926 replies
  • September 21, 2020

For a multiple choice question (e.g., a drop-down) Qualtrics only records choices it knows about. You can't use JS to add choices on the fly.
What you could do is use a text entry question, hide the text entry box, and use JS to create a select (i.e., drop-down) on the fly. Then you could have JS copy the selected value into the hidden text entry field.


Forum|alt.badge.img

TomG thank you so much! I have this mostly solved. Last question: how do I copy the selected value into the hidden text entry field?
JS:
Qualtrics.SurveyEngine.addOnload(function()
{
jQuery(".InputText").hide()


// inspired by https://stackoverflow.com/questions/32925880/using-javascript-to-loop-through-drop-down-html-array
var sex = [];
var N = 1000;


for (var i = 0; i <= N; i = i+25) {
x = i / 100
x = "$" + x.toFixed(2)
   sex.push(x);
}


/* var sex = ["male", "female", "unknown"];*/


for (i = 0; i < sex.length; i++) {
  var opt = document.createElement("option");
  document.getElementById("m").innerHTML += '';
}


});
Question text html:


 
   
   
     
     
   
 
Demographics
Willingness to hire:
       
     



TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • 5926 replies
  • Answer
  • September 22, 2020

https://www.qualtrics.com/community/discussion/comment/30476#Comment_30476First, remove the form from your html. The Qualtrics page is already a form.
To copy the select value to the input field, you can use the addOnPageSubmit() function:
Qualtrics.SurveyEngine.addOnPageSubmit(function() {
jQuery("#"+questionId+" .InputText").val(jQuery("#m").val());
});


Leave a Reply