JavaScript - Not Exporting Embedded Data Set from JavaScript | XM Community
Skip to main content

Worked with Copilot to help with the JavaScript to create a drop down list of States and then list of 4-year institutions from an excel file saved within Qualtrics- it works perfectly, but will not export the selected choices from the completed survey. I did create embedded data titles SelectedState and SelectedInstitution in the workflow. Can anyone tell me what I might need to change??

 

Qualtrics.SurveyEngine.addOnload(function() {
  const stateDropdown = this.getQuestionTextContainer().querySelector('#stateDropdown');
  const institutionDropdown = this.getQuestionTextContainer().querySelector('#institutionDropdown');

  const csvUrl = 'https://ftcc.qualtrics.com/ControlPanel/File.php?F=F_aRRR1riwty8RhjY';

  const script = document.createElement('script');
  script.src = 'https://cdn.jsdelivr.net/npm/papaparse@5.4.1/papaparse.min.js';
  script.onload = () => {
    Papa.parse(csvUrl, {
      download: true,
      header: true,
      complete: function(results) {
        const data = results.data;

        // Populate state list
        const states = [...new Set(data.map(row => row.State).filter(Boolean))].sort();
        stateDropdown.innerHTML = '<option value="">Select a state or territory</option>';
        states.forEach(state => {
          const option = document.createElement('option');
          option.value = state;
          option.textContent = state;
          stateDropdown.appendChild(option);
        });

        // On state change
        stateDropdown.addEventListener('change', function() {
          const selectedState = this.value;
          Qualtrics.SurveyEngine.setEmbeddedData('SelectedState', selectedState); // ✅ Store selection

          const institutions = data
            .filter(row => row.State === selectedState)
            .map(row => row['Institution Name'])
            .filter(Boolean)
            .sort();

          institutionDropdown.innerHTML = '<option value="">Select your institution</option>';
          institutions.forEach(inst => {
            const option = document.createElement('option');
            option.value = inst;
            option.textContent = inst;
            institutionDropdown.appendChild(option);
          });

          institutionDropdown.disabled = false;
        });

        // On institution change
        institutionDropdown.addEventListener('change', function() {
          const selectedInstitution = this.value;
          Qualtrics.SurveyEngine.setEmbeddedData('SelectedInstitution', selectedInstitution); // ✅ Store selection
        });
      }
    });
  };
  document.head.appendChild(script);
});

 

 

Are you using New Experience (aka Simple layout)? If so, you need to use setJSEmbeddedData() and your fields needs to be prefixed by __js_ in the survey flow.


I am using the New Experience - let me try this change to see if it works! Thanks!!

 


I think I changed it to “setJSEmbeddedData() and the survey flow fields, but still not exporting the data

 

 

Qualtrics.SurveyEngine.addOnload(function() {
  const stateDropdown = document.querySelector('#stateDropdown');
  const institutionDropdown = document.querySelector('#institutionDropdown');

  const csvUrl = 'https://ftcc.qualtrics.com/ControlPanel/File.php?F=F_aRRR1riwty8RhjY';

  const script = document.createElement('script');
  script.src = 'https://cdn.jsdelivr.net/npm/papaparse@5.4.1/papaparse.min.js';
  script.onload = () => {
    Papa.parse(csvUrl, {
      download: true,
      header: true,
      complete: function(results) {
        const data = results.data;

        // Populate state list
        const states = [...new Set(data.map(row => row.State).filter(Boolean))].sort();
        stateDropdown.innerHTML = '<option value="">Select a state or territory</option>';
        states.forEach(state => {
          const option = document.createElement('option');
          option.value = state;
          option.textContent = state;
          stateDropdown.appendChild(option);
        });

        // On state change
        stateDropdown.addEventListener('change', function() {
          const selectedState = this.value;
          Qualtrics.SurveyEngine.setJSEmbeddedData('__js_SelectedState', selectedState); // ✅ Updated

          const institutions = data
            .filter(row => row.State === selectedState)
            .map(row => row['Institution Name'])
            .filter(Boolean)
            .sort();

          institutionDropdown.innerHTML = '<option value="">Select your institution</option>';
          institutions.forEach(inst => {
            const option = document.createElement('option');
            option.value = inst;
            option.textContent = inst;
            institutionDropdown.appendChild(option);
          });

          institutionDropdown.disabled = false;
        });

        // On institution change
        institutionDropdown.addEventListener('change', function() {
          const selectedInstitution = this.value;
          Qualtrics.SurveyEngine.setJSEmbeddedData('__js_SelectedInstitution', selectedInstitution); // ✅ Updated
        });
      }
    });
  };
  document.head.appendChild(script);
});


Did not work when I changed to “setJSEmbeddedData(...)” - I did change the field names as well

I tried to copy the javascript but it has to get approved first.


Qualtrics.SurveyEngine.addOnload(function() {
  const stateDropdown = document.querySelector('#stateDropdown');
  const institutionDropdown = document.querySelector('#institutionDropdown');

  const csvUrl = 'https://ftcc.qualtrics.com/ControlPanel/File.php?F=F_aRRR1riwty8RhjY';

  const script = document.createElement('script');
  script.src = 'https://cdn.jsdelivr.net/npm/papaparse@5.4.1/papaparse.min.js';
  script.onload = () => {
    Papa.parse(csvUrl, {
      download: true,
      header: true,
      complete: function(results) {
        const data = results.data;

        // Populate state list
        const states = [...new Set(data.map(row => row.State).filter(Boolean))].sort();
        stateDropdown.innerHTML = '<option value="">Select a state or territory</option>';
        states.forEach(state => {
          const option = document.createElement('option');
          option.value = state;
          option.textContent = state;
          stateDropdown.appendChild(option);
        });

        // On state change
        stateDropdown.addEventListener('change', function() {
          const selectedState = this.value;
          Qualtrics.SurveyEngine.setJSEmbeddedData('__js_SelectedState', selectedState); // ✅ Updated

          const institutions = data
            .filter(row => row.State === selectedState)
            .map(row => row['Institution Name'])
            .filter(Boolean)
            .sort();

          institutionDropdown.innerHTML = '<option value="">Select your institution</option>';
          institutions.forEach(inst => {
            const option = document.createElement('option');
            option.value = inst;
            option.textContent = inst;
            institutionDropdown.appendChild(option);
          });

          institutionDropdown.disabled = false;
        });

        // On institution change
        institutionDropdown.addEventListener('change', function() {
          const selectedInstitution = this.value;
          Qualtrics.SurveyEngine.setJSEmbeddedData('__js_SelectedInstitution', selectedInstitution); // ✅ Updated
        });
      }
    });
  };
  document.head.appendChild(script);
});


Hi,

You need to use “__js_” in the survey flow but not in your javascript code.

See the question API for reference.


It WORKS!! I can’t thank you guys enough!!!!