Check that after all inputs have value make button active-CodePudding

I want to remove the disabled attribute from the button when each field is filled out. My code works when a single input is filled. What am i doing wrong here?

Here are the HTML and JS

checkInput()

function checkInput() {
    let input = document.querySelectorAll('.form-control')
    const button = document.querySelector('.submit-btn')

    input.forEach(function (e) {
        let disabled = true;
        e.addEventListener('keyup', function () {
            if (e.value !== '') {
                disabled = false
            } else {
                disabled = true
                return false
            }

            if(disabled) {
                button.setAttribute('disabled', 'disabled')
            } else {
                button.removeAttribute('disabled')
            }
        })
    })
}

<div class="form-group">
  <label for="name">Name*</label>
  <input class="form-control" type="text" id="name" placeholder="Name">
</div>
<div class="form-group">
  <label for="lastName">lastName*</label>
  <input class="form-control" type="text" id="lastName" placeholder="lastName">
</div>
<div class="form-group">
  <label for="fiscalCode">fiscalCode*</label>
  <input class="form-control" type="text" id="fiscalCode" placeholder="fiscalCode">
</div>
<button type="submit" disabled="disabled" class="submit-btn">Continue</button>

CodePudding user response：

It does not work because you want to have all inputs affect the state of a button, yet you only check one variable for adding/removing disabled property.

Here is a working code snippet with an example where i created an array of properties, one for each input, that i can refer to in every fired key up event

checkInput()

function checkInput() {
    let input = document.querySelectorAll('.form-control')
    const button = document.querySelector('.submit-btn')
    const disabled = Array(input.length).fill(true);

    input.forEach(function (e, index) {
        e.addEventListener('input', function () {
            disabled[index] = e.value === ''; // simplified if/else statement of yours

            if(disabled.some(Boolean)) {
                button.setAttribute('disabled', 'disabled')
            } else {
                button.removeAttribute('disabled')
            }
        })
    })
}

<div class="form-group">
  <label for="name">Name*</label>
  <input class="form-control" type="text" id="name" placeholder="Name">
</div>
<div class="form-group">
  <label for="lastName">lastName*</label>
  <input class="form-control" type="text" id="lastName" placeholder="lastName">
</div>
<div class="form-group">
  <label for="fiscalCode">fiscalCode*</label>
  <input class="form-control" type="text" id="fiscalCode" placeholder="fiscalCode">
</div>
<button type="submit" disabled="disabled" class="submit-btn">Prosegui</button>

Additionaly stoping the function execution when assigning disabled = true in the first else statement is also a wrong approach, as you most likely want to not only assign the disable value, but also the disabled property of the button.

EDIT: as mentioned in the comment by CID it is reasonable to change the event listener to input so we can handle the copying and pasting events as well

CodePudding user response：

You are adding a keyup event for each input field. that event only checks the current input field if it is empty or not. it does not check the 3 input fields itself

this should do the trick:

checkInput()

function checkInput() {
    let input = document.querySelectorAll('.form-control')
    const button = document.querySelector('.submit-btn')

    input.forEach(function (e) {
        let disabled = true;
        e.addEventListener('keyup', function () {
           const emptyFields =  Array.from(input).filter( input => input.value === "");
           disabled = emptyFields.length > 0;
            if(disabled) {
                button.setAttribute('disabled', 'disabled')
            } else {
                button.removeAttribute('disabled')
            }
        })
    })
}

CodePudding user response：

You are enabling the submit button on keyup event of any 3 inputs. So it gets enabled on any 3 inputs.
Remove the return on disabled flow to disable button after clearing.

checkInput()

function checkInput() {
    let input = document.querySelectorAll('.form-control')
    const button = document.querySelector('.submit-btn')

    input.forEach(function (e) {
        let disabled = true;
        e.addEventListener('keyup', function () {
            if (e.value !== '') {
                disabled = false
            } else {
                disabled = true
                // return false <-- this makes function exit before your disable button
            }
            if(disabled) {
                button.setAttribute('disabled', 'disabled')
            } else {
                button.removeAttribute('disabled')
            }
        })
    })
}

<div class="form-group">
  <label for="name">Name*</label>
  <input class="form-control" type="text" id="name" placeholder="Name">
</div>
<div class="form-group">
  <label for="lastName">lastName*</label>
  <input class="form-control" type="text" id="lastName" placeholder="lastName">
</div>
<div class="form-group">
  <label for="fiscalCode">fiscalCode*</label>
  <input class="form-control" type="text" id="fiscalCode" placeholder="fiscalCode">
</div>
<button type="submit" disabled="disabled" class="submit-btn">Continue</button>

CodePudding user response：

Another solution is to check if all inputs are filled out on every change in any input.

addHandlers();

// Return true if all fields are not empty
function areAllFieldsFilledOut() {
    let inputs = document.querySelectorAll('.form-control');
  let result = true;
  
  inputs.forEach(e => {
    if (e.value === "")
        result = false;
  });
  
  return result;
}

// Add keyup event handlers to all input fields
function addHandlers() {
    let inputs = document.querySelectorAll('.form-control');
    const button = document.querySelector('.submit-btn');

    inputs.forEach(e => {
        // On each change in any input, check if all inputs are
        // not empty, and if true, enable the button
        e.addEventListener('keyup', e => {
            let result = areAllFieldsFilledOut();

            if (result) {
                button.removeAttribute('disabled');
            } else {
                button.setAttribute('disabled', 'disabled');
            }
        });
    });
}

<div class="form-group">
  <label for="name">Name*</label>
  <input class="form-control" type="text" id="name" placeholder="Name">
</div>
<div class="form-group">
  <label for="lastName">lastName*</label>
  <input class="form-control" type="text" id="lastName" placeholder="lastName">
</div>
<div class="form-group">
  <label for="fiscalCode">fiscalCode*</label>
  <input class="form-control" type="text" id="fiscalCode" placeholder="fiscalCode">
</div>
<button type="submit" disabled="disabled" class="submit-btn">Prosegui</button>

CodePudding user response：

Here is my answer:

function checkInput() {
    document.querySelectorAll('input').forEach(input => {

        input.addEventListener('keyup', function () {
            let emptyFieldsCount = Array.from(input).filter(input => input.value == "").length;
            
            if (emptyFieldsCount > 0) {
                button.setAttribute('disabled', 'disabled')
            } else {
                button.removeAttribute('disabled')
            }

        })

    });
}