Retrieving <select> data with survey-html-form

[amunn]

I'm using the survey-html-form for collecting basic demographic info from our participants. Text input works, but data from <select> dropdown choices doesn't get added to the responses. Is there a way to do this?

    var timeline = [];

    var demographic_trial = {
      type: 'survey-html-form',
      preamble: "<p>What is your gender?</p>",
      html: '<select id="gender">'+
            '<option value="_M_">Male </option>' +
            '<option value="_F_">Female </option>' +
            '<option value="_N_">Non-Binary </option>' +
            '<option value="_O_">Prefer not to say </option>' +
            '</select><br>'
};

    timeline.push(demographic_trial);

    jsPsych.init({
      timeline: timeline,
       on_finish: function(){jsPsych.data.displayData()}// comment this out when running on server
    });

[amunn]

I figured out the answer: the survey-html-form code ignores anything without a name designation. I assumed it would track fields by id. Adding a name to the <select> element correctly solves the problem:

var demographic_trial = {
      type: 'survey-html-form',
      preamble: "<p>What is your gender?</p>",
      html: '<select id="gender" name="gender">'+
            '<option value="_M_">Male </option>' +
            '<option value="_F_">Female </option>' +
            '<option value="_N_">Non-Binary </option>' +
            '<option value="_O_">Prefer not to say </option>' +
            '</select><br>'