Prevent survey progression via JavaScript | XM Community
Skip to main content

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 = 10

question_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;
}
});

 

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!


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);
}
});

 


Hi ​@jamesbyrne,

Did any of the solutions provided on this thread solve your issue?


Leave a Reply