I want to disable a button until all of the inputs on the page are filled. I am doing this using only JavaScript without a form in html (changing it to a form messes with my other code). Currently, the button will enable when some of the inputs are filled (one or more), but if all of the inputs are filled the button disables. The button is also disabled when no inputs are filled. I would like to disable the button until all the inputs are filled so that the user cannot submit it empty or having filled only some inputs.
JavaScript code that checks if the inputs are filled:
JavaScript code that checks if the inputs are filled:
Code:
document.addEventListener('DOMContentLoaded', function(){
const required = document.querySelectorAll('.input');
function checkSubmit(button){
let isValid = true;
for(let i = 0; i <required.length; i++){
isValid = isValid && !!required.value;
console.log("is enabled");
}
button.disabled = isValid;
console.log("is disabled");
}
function inputHandler(button){
return function(){
checkSubmit(button);
};
}
//gets all the quiz_buttons
const quizButton = document.querySelectorAll('.quiz_button');
for (const button of quizButton){
button.disabled = true;
for(let i = 0; i < required.length; i++){
required.addEventListener("input", inputHandler(button));
}
button.addEventListener('click', (event) =>
check_quiz(event.target.id));
}
});