Does the “New Survey Experience” require doing something additional to make jQuery work? | Experience Community
Skip to main content
JoseS
Administrator
1 year ago
Solved

Does the “New Survey Experience” require doing something additional to make jQuery work?

  • Jun 16, 2025 12:57 PM UTC
  • 5 replies
  • 551 views
Forum|alt.badge.img+2

 

I switched a survey over to the “New Survey Experience.” In the prior survey version, the javascript that I used in the question to create an embedded variable works as expected. I’ve included the query below. When I switched to the “New Survey Experience” the embedded variable is no longer being created and I get the following errors in the console: “Error executing custom js: ReferenceError: o is not defined” and “Listener must be a named function”.

Does the “New Survey Experience” require doing something additional to make jQuery work?

Qualtrics.SurveyEngine.addOnPageSubmit(function() {
  var essayText = jQuery("#" + this.questionId + " .InputText").val();
 var htmlText = essayText.replace(/\n/g, "<br>");
 Qualtrics.SurveyEngine.setEmbeddedData("FormattedResp", htmlText);
});

Best answer by vgayraud

Hi,

Try the following for a new survey taking experience version that doesn’t require jQuery:

Qualtrics.SurveyEngine.addOnPageSubmit(function () {

  var textarea = document.querySelector("#question-" + this.questionId + " .text-input");
  var htmlText = textarea ? textarea.value.replace(/\n/g, "<br>") : "";
  Qualtrics.SurveyEngine.setJSEmbeddedData("FormattedResp", htmlText);

});

Your survey flow should look like this:

 

View original

    5 replies

    vgayraud
    QPN Level 8 ●●●●●●●●
    Forum|alt.badge.img+67
    • vgayraud
    • QPN Level 8 ●●●●●●●●
    • Jun 16, 2025 2:57 PM UTC

    Hi,

    You need to include jQuery from a CDN in your survey or theme header in the new survey experience.

    Your code will need to be updated as well. Elements names, classes and IDs are not the same. setEmbeddedData method is not usable anymore either, you’ll need to use setJSEmbeddedData and prefix your EDs with __js_ to access them in your custom code. See the question API for usage.

    Vincent Gayraud - https://www.linkedin.com/in/vincent-gayraud-790344116/
    Forum|alt.badge.img+2
    • Jenna_R
    • Author
    • Jun 16, 2025 9:31 PM UTC

    Thanks for the additional information. It still didn’t work. This is the script that I had used in my survey header (source).

     <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><script type="text/javascript">Qualtrics.SurveyEngine.addOnReady(function() { jQuery('#Plug').attr('style', 'display:none !important');});</script>

     

    Do you have recommended changes? (I had just found it online when I searched how to load jQuery from a CDN, so it could be way off.)

     

     

    vgayraud
    QPN Level 8 ●●●●●●●●
    Forum|alt.badge.img+67
    • vgayraud
    • QPN Level 8 ●●●●●●●●
    • Answer
    • Jun 17, 2025 5:54 AM UTC

    Hi,

    Try the following for a new survey taking experience version that doesn’t require jQuery:

    Qualtrics.SurveyEngine.addOnPageSubmit(function () {

      var textarea = document.querySelector("#question-" + this.questionId + " .text-input");
      var htmlText = textarea ? textarea.value.replace(/\n/g, "<br>") : "";
      Qualtrics.SurveyEngine.setJSEmbeddedData("FormattedResp", htmlText);

    });

    Your survey flow should look like this:

     

    Vincent Gayraud - https://www.linkedin.com/in/vincent-gayraud-790344116/
      vgayraud
      QPN Level 8 ●●●●●●●●
      Forum|alt.badge.img+67
      • vgayraud
      • QPN Level 8 ●●●●●●●●
      • Jun 17, 2025 5:56 AM UTC

      And since we’re at it, here’s the fix for your #Plug:

       

      Vincent Gayraud - https://www.linkedin.com/in/vincent-gayraud-790344116/
        Forum|alt.badge.img+2
        • Jenna_R
        • Author
        • Jun 17, 2025 2:53 PM UTC

        That worked! Thank you so much!!

          Terms & ConditionsAccessibility statement