Prevent survey progression via JavaScript

Question

In my survey I have a constant sum matrix table with 2 columns and the total for the 2 columns must equal the value given for a previous question, e.g.: question_0: how many items did you buy? ; answer_0 = 10question_1: 			for you			for your friend		apples			a			b		oranges			c			d		total			e			f		I only want to allow the survey to progress when e + f = 10. I think the default sum validation can only look at e and f individually and check if these equal 10? I have added some JavaScript inside the addOnPageSubmit method and I can return a browser alert when the totals don’t match, but the survey still progresses to the next page when the alert is dismissed. Is there anything I am doing wrong, or missing? Thanks! Qualtrics.SurveyEngine.addOnPageSubmit(function() {    // Function to validate the totals    function validateTotal() {        // Retrieve the embedded data field value        const s17_01 = parseFloat('${e://Field/s17_01}');        // Retrieve the values entered by the respondent        const inPatientTotal = parseFloat(document.getElementById('QID40~1_Total').value) || 0;        const outPatientTotal = parseFloat(document.getElementById('QID40~2_Total').value) || 0;        // Calculate the combined total        let allPatientTotal = inPatientTotal + outPatientTotal;        // Check if the totals match        if (s17_01 !== allPatientTotal) {            // Show an alert if the totals do not match            alert('Totals are not correct.');            return false; // Return false to prevent page submission        }        return true; // Return true if the totals match    }    // Check the result of validateTotal before submitting the page    if (!validateTotal()) {        // Prevent page submission if validation fails        return false;    }});

vgayraud · Accepted Answer

Qualtrics.SurveyEngine.addOnReady(function() {    var that = this;    var expectedTotal = parseFloat(Qualtrics.SurveyEngine.getEmbeddedData('s17_01')) || 0;    function validateTotal() {        var sum =            (parseFloat(document.getElementById(that.questionId + '~1_Total') && document.getElementById(that.questionId + '~1_Total').value) || 0) +            (parseFloat(document.getElementById(that.questionId + '~2_Total') && document.getElementById(that.questionId + '~2_Total').value) || 0);        if (sum !== expectedTotal) {            alert("Totals are not correct. Sum must equal " + expectedTotal + ".");            return false;        }        return true;    }    var nextButton = document.getElementById("NextButton");    if (nextButton) {        nextButton.addEventListener("click", function(event) {            if (!validateTotal()) {                event.preventDefault();                event.stopPropagation();                event.stopImmediatePropagation();            }        }, true);    }});

nikamshubham_73 · Answer

Hi ​@jamesbyrne,If your code functions correctly but still allows the survey to proceed prematurely, you should implement a custom (fake) Next button and apply your validation logic to it. Here's how:Step 1: Hide the original Next button using:jQuery("#NextButton").css("visibility","hidden");Step 2: Create a custom Fake Next Button and move your validation logic to this button.Step 3: If the validation fails, display the relevant error message. Hope this helps!Step 4: If the validation passes, trigger the original Next button using:jQuery("#NextButton").click();Hope this helps!

Sign up

Login to the Community

Scanning file for viruses.

This file cannot be downloaded