I made a Javascript/HTML table which has multiple dropdown questions (labeled as "dropdown1_left", "dropdown1_right", etc.) within the table that I want to be required. I have not been able to figure out how to make this work. Below is my code for this specific function. When I take the survey, the console log says “Listener must be a named function.” so this may be causing the problem. When I hit the next page button, I do get a pop-up saying “Please make a selection for all required dropdowns.” but it still moves on to the next page. So some level of the validation seems to be working but ultimately not the most important part (I want it to not allow users to go to the next page until all dropdowns are answered).Any thoughts on how to make this work? I’m pretty new to Javascript and especially using it in Qualtrics so I am hoping to learn how to code this in. Thank you so much in advance. Qualtrics.SurveyEngine.addOnPageSubmit(function(type) { if (type === "next") { // Trigger validation only when "Next" is clicked var requiredDropdownIDs = [ "dropdown1_left", "dropdown1_right", "dropdown2_left", "dropdown2_right", "dropdown3_left", "dropdown3_right", "dropdown4_left", "dropdown4_right", "dropdown5_left", "dropdown5_right", "dropdown6_left", "dropdown6_right", "dropdown7_left", "dropdown7_right", "dropdown8_left", "dropdown8_right", "dropdown9_left", "dropdown9_right", "dropdown10_left", "dropdown10_right", "dropdown11_left", "dropdown11_right", "dropdown12_left", "dropdown12_right", "dropdown13_left", "dropdown13_right", "dropdown14_left", "dropdown14_right", "dropdown15_left", "dropdown15_right" ]; var isValid = true; // Flag to track overall validation // Iterate through each dropdown and validate its value requiredDropdownIDs.forEach(function(id) { var dropdown = document.getElementById(id); // Log each dropdown ID and its value for debugging console.log("Checking dropdown:", id, "Value:", dropdown ? dropdown.value : "Not Found"); if (dropdown && dropdown.value === "Select an option") { isValid = false; // Mark as invalid if dropdown is unselected dropdown.style.border = "2px solid red"; // Highlight unselected dropdown } else if (dropdown) { dropdown.style.border = ""; // Clear the border if dropdown is valid } }); // If any dropdown is unselected, prevent form submission if (!isValid) { alert("Please make a selection for all required dropdowns."); jQuery("#NextButton").hide(); } // Log success if all validations pass console.log("All dropdowns are selected. Proceeding to next page."); }});

I made a Javascript/HTML table which has multiple dropdown questions (labeled as "dropdown1_left", "dropdown1_right", etc.)within the table that I want to be required.@rgrothWe don’t know what is your customJavascript/HTML table and also it might be deciding factor.Also, there’s easier & more managebleway of making table contain multiple question via Side-by-side question. I think you should give it a try because the validation is built-in already.Side by Side Question

Using Javascript to force response on dropdown questions in Javascript/HTML table?

Using Javascript to force response on dropdown questions in Javascript/HTML table? | Experience Community

Sign up

Login to the Community

Scanning file for viruses.

This file cannot be downloaded