Reminder when clicking next button in survey | XM Community
Skip to main content

Hi Everyone,

 

I would like a reminder to pop up when a respondent is clicking the “Next Button” after filling out a text field in my survey. Next, if the person clicks “cancel” I would like the respondent to *stay on the page*, and otherwise progress to the next question. 

Weirdly, all that I described works if the question is placed at the very beginning of the survey, but not if it is placed in between other questions further down. Does anyone have an idea what the issue could be?

Here’s the code I am using:

Qualtrics.SurveyEngine.addOnReady(function() {
  // Add an event listener to the Next button
  var nextButton = document.getElementById('NextButton');
  
  nextButton.addEventListener('click', function() { 
      
     if (confirm("In case you would like to share your message with your co-workers, please make sure you copied the message from the text field. Do you want to move on to the next page?") == false) {
        event.preventDefault(); // Prevent the default action of moving to the next page
        event.stopPropagation(); // Prevent the event from propagating to other click listeners
         event.stopImmediatePropagation(); // Prevent any additional click listeners from executing
        }
  });
});

 

Thanks a lot!

 

Best,

Chantal

 

 

The issue you're experiencing might be related to the placement of the JavaScript code that handles the reminder and cancellation behaviour. When a question is placed further down the survey, the JavaScript code might not be triggered correctly due to the survey's remaindering process.

Please try with below code once:

 

Qualtrics.SurveyEngine.addOnload(function() {
  var textFieldQuestionId = 'QID1'; // Replace with the actual question ID
  Qualtrics.SurveyEngine.addOnReady(function() {
    var textFieldElement = this.getQuestionContainer().querySelector('#' + textFieldQuestionId + ' .InputText');
    textFieldElement.addEventListener('input', function() {
 
      alert('Please remember to complete the next question before proceeding.');
    });
  });
  Qualtrics.SurveyEngine.addOnBeforeNext(function() {
    var cancelButton = this.getQuestionContainer().querySelector('.Button.cancel');
    if (cancelButton && cancelButton.classList.contains('EngineButton')) {
      event.stopPropagation();
      event.preventDefault();
    }
  });
});
 

 

Thank you very much!

For anyone interested, here’s how I solved it:

 

Qualtrics.SurveyEngine.addOnReady(function() {
  // Create a custom button
  var customButton = document.createElement('button');
  customButton.innerHTML = 'Next';
  
  // Get the Next button element
  var nextButton = document.getElementById('NextButton');
  
  // Replace the Next button with the custom button
  nextButton.parentNode.replaceChild(customButton, nextButton);

  // Add a click event listener to the custom button
  customButton.addEventListener('click', function(event) {
    var confirmed = confirm("In case you would like to share your message with your co-workers, please make sure you copied the message from the text field. Do you want to move on to the next page?");
    
    if (!confirmed) {
      // Prevent the default action of moving to the next page
      event.preventDefault();
      event.stopPropagation();
      event.stopImmediatePropagation();
    } else {
      // Allow the default action of moving to the next page
      customButton.disabled = true; // Disable the custom button to prevent multiple clicks
      nextButton.click(); // Trigger the click event on the original Next button
    }
  });
});

Leave a Reply


Terms & Conditions