Button enabling before all inputs are filled and disabling when all inputs are filled


Joined
Aug 18, 2022
Messages
1
Reaction score
0
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:

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

Advertisements

Joined
Jul 3, 2022
Messages
25
Reaction score
0
Since we have no markup, i'd try to do it this way:

HTML:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
    label{
    display: inline-block;
    cursor: pointer;
    font-weight: bold;
    padding: 10px;
    }
    </style>
   <script>
   onload = function(){
   [...document.querySelectorAll('fieldset')].forEach( (el) => {
   el.addEventListener('keyup', function(){
   this.querySelector('.quiz_button').disabled = [...this.querySelectorAll('input')].filter( item => !item.value ).length > 0 ? 1 : 0;
   });
   });
   }
   </script>
  </head>
  <body>
    <fieldset>
    <legend>First section questions:</legend>
      <label for="inp_1">1. <input class="input" type="text" id="inp_1" value="" /></label>
    <label for="inp_2">2. <input class="input" type="text" id="inp_2" value="" /></label>
    <label for="inp_3">3. <input class="input" type="text" id="inp_3" value="" /></label>
    <label for="inp_4">4. <input class="input" type="text" id="inp_4" value="" /></label>
    <label for="inp_5">5. <input class="input" type="text" id="inp_5" value="" /></label>
    <button class="quiz_button" disabled>Submit</button>
    </fieldset>
    <fieldset>
    <legend>Second section questions:</legend>
      <label for="inp_6">1. <input class="input" type="text" id="inp_6" value="" /></label>
    <label for="inp_7">2. <input class="input" type="text" id="inp_7" value="" /></label>
    <label for="inp_7">3. <input class="input" type="text" id="inp_8" value="" /></label>
    <label for="inp_9">4. <input class="input" type="text" id="inp_9" value="" /></label>
    <label for="inp_10">5. <input class="input" type="text" id="inp_10" value="" /></label>
    <button class="quiz_button" disabled>Submit</button>
    </fieldset>
  </body>
</html>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top