Changing the value of an input element in the new survey experience | Experience Community
Skip to main content
Question

Changing the value of an input element in the new survey experience

  • February 19, 2026
  • 1 reply
  • 17 views
B
Forum|alt.badge.img

Hi, 

I’ve got a matrix type multiple text entry style question. The question deals with quite large numbers so I would like to insert commas preceding every third digit e.g 1000000 => 1,000,000.

 

I’ve got the following code:

Qualtrics.SurveyEngine.addOnReady(function()
{
    /*Place your JavaScript here to run when the page is fully displayed*/
    
 const questionInputs = this.getQuestionContainer().querySelectorAll('input[type="text"]');

         questionInputs.forEach(inputBox => {
             inputBox.addEventListener("input", function (event) {
             var inputVal = this.value
             let num = inputVal.replace(/,/gi, "")
             let numWithCommas = num.replace(/\d(?=(?:\d{3})+$)/g, '$&,');
              this.value = numWithCommas

            })
        })
});

 

This seems to work fine on the old survey builder but seems to have issues on the new experience.

Whenever the mouse is moved away or the element loses focus, the input value disappears completely.

If I change the event listener from input to keyup, the value stays but loses some of it’s formatting.

 

Just wondering if anyone knows what would be causing this and if there are any ways to work around it.

 

Thanks,

Sam

 

    1 reply

    N
    Forum|alt.badge.img

    Hi ​@bartys,

    Old Qualtrics = jQuery / vanilla DOM(Document Object Model)
    The NSTE = React controlled components

    The New Survey Taking Experience is built using React (a JavaScript framework).

    In React:

    • The input field you see is controlled by React state

    • React stores the value internally

    • When you move to another textbox, React re-renders

    • If the internal state ≠ DOM value → React overwrites DOM

    The below code should work for you:
     

    Qualtrics.SurveyEngine.addOnReady(function()
    {
        /*Place your JavaScript here to run when the page is fully displayed*/

          const qContainer = this.getQuestionContainer();

        function setNativeValue(element, value) {
            const valueSetter = Object.getOwnPropertyDescriptor(
                window.HTMLInputElement.prototype,
                "value"
            ).set;

            valueSetter.call(element, value);

            element.dispatchEvent(new Event("input", { bubbles: true }));
        }

        function formatNumber(input) {
            let raw = input.value.replace(/,/g, "").replace(/\D/g, "");
            if (!raw) {
                setNativeValue(input, "");
                return;
            }

            let formatted = Number(raw).toLocaleString("en-US");

            if (input.value !== formatted) {
                setNativeValue(input, formatted);
            }
        }

        qContainer.addEventListener("input", function (e) {
            if (e.target && e.target.type === "text") {
                formatNumber(e.target);
            }
        });
        
    });

     

    Terms & ConditionsAccessibility statement