Phone Number Auto-Format with New Survey Experience / Simple Layout

Hi ​@jake_dufinetz 

Adapted from a script I already wrote that would do the opposite (strip all non digits chars and store as 10 digits number). I didn’t test extensively this new version. Designed to work both in classic layouts and NSTE.

Qualtrics.SurveyEngine.addOnPageSubmit(function () {
    var questionId = this.questionId;

    function setNativeValue(element, value) {
        const valueSetter = Object.getOwnPropertyDescriptor(element, 'value').set;
        const prototype = Object.getPrototypeOf(element);
        const prototypeValueSetter = Object.getOwnPropertyDescriptor(prototype, 'value').set;
        if (valueSetter && valueSetter !== prototypeValueSetter) {
            prototypeValueSetter.call(element, value);
        } else {
            valueSetter.call(element, value);
        }
    }

    function formatPhoneNumber(digits) {
        if (digits.length === 10) {
            return digits.slice(0, 3) + '-' + digits.slice(3, 6) + '-' + digits.slice(6);
        }
        return digits;
    }

    var inputClassic = document.querySelector("#" + this.questionId + " .InputText");
    var inputSimple = document.querySelector("#question-" + this.questionId + " .text-input");
    var inputElement;

    if (inputClassic) {
        inputElement = inputClassic;
        console.log(inputClassic, inputSimple, inputElement);

        var digitsOnly = inputElement.value.replace(/\D/g, "");
        inputElement.value = formatPhoneNumber(digitsOnly);

    } else {
        inputElement = inputSimple;
        console.log(inputClassic, inputSimple, inputElement);

        var digitsOnly = inputElement.value.replace(/\D/g, "");
        var formatted = formatPhoneNumber(digitsOnly);

        setNativeValue(inputElement, formatted);
        inputElement.dispatchEvent(new Event('input', {
            bubbles: true
        }));
    }

    var noTel = inputElement.value;
    console.log("Formatted phone:", noTel);
});