Hiding Next Button Until Requirements Met Using Javascript

Question

I am trying to make it so my next button is hidden until a certain requirement is met (all the dropdown questions, created using HTML, have an option selected -- if no option is selected, the value for each dropdown is “”).With how it is right now, the next button is hidden, but selecting choices for each dropdown does not make the next button show up as needed. I’ve tried different iterations of this but can’t get it to make the next button show up. Qualtrics.SurveyEngine.addOnload(function() {    //disable next button    this.hideNextButton();var requiredLeftDropdownIDs = [        "dropdown1_left", "dropdown2_left",         "dropdown3_left", "dropdown4_left",         "dropdown5_left", "dropdown6_left",         "dropdown7_left", "dropdown8_left",         "dropdown9_left", "dropdown10_left",         "dropdown11_left", "dropdown12_left",         "dropdown13_left", "dropdown14_left",         "dropdown15_left",     ];allValid = true;requiredLeftDropdownIDs.forEach(function (id) {            var dropdown = document.getElementById(id);            if (dropdown.value == "") {                allValid = false; // Mark as invalid if any dropdown is not properly selected            }    });        if (allValid) {            this.showNextButton();        } else {            this.hideNextButton();        }});

Aggarwal · Answer

You need to add an event listener to check changes in dropdown:Can you check belowQualtrics.SurveyEngine.addOnload(function() {  // Disable next button initially  this.hideNextButton();  var that = this; // Capture the context for use in event handlers  var requiredLeftDropdownIDs = [    "dropdown1_left", "dropdown2_left",    "dropdown3_left", "dropdown4_left",    "dropdown5_left", "dropdown6_left",    "dropdown7_left", "dropdown8_left",    "dropdown9_left", "dropdown10_left",    "dropdown11_left", "dropdown12_left",    "dropdown13_left", "dropdown14_left",    "dropdown15_left"  ];  function validateDropdowns() {    var allValid = true;    requiredLeftDropdownIDs.forEach(function(id) {      var dropdown = document.getElementById(id);      if (dropdown && dropdown.value === "") {        allValid = false; // Mark as invalid if any dropdown is not properly selected      }    });    if (allValid) {      that.showNextButton(); // Show next button if all dropdowns are valid    } else {      that.hideNextButton(); // Hide next button otherwise    }  }  // Attach an event listener to each dropdown  requiredLeftDropdownIDs.forEach(function(id) {    var dropdown = document.getElementById(id);    if (dropdown) {      dropdown.addEventListener("change", validateDropdowns);    }  });  // Initial validation check in case dropdowns have preset values  validateDropdowns();});

Sign up

Login to the Community

Scanning file for viruses.

This file cannot be downloaded