(Javascript) Checking if all input fields have been filled and activating a button afterwards-CodePudding

I have a group of dynamically generated input fields. I want to loop through all of them and check if the user has indeed written something on them.
If all fields have been filled, activate the button, otherwise, desactivate it.
Code is really long, so here is the most important part :

        //Here is the loop that creates the number of inputs to create based on what the user enters:
        (CourseObject.course_array).forEach((evaluation,value) => {
        const percentage_value = CourseObject.each_evaluation_value[value]; 

        //Some lists
        const li_inputs = document.createElement('li');
        li_inputs.id = ((`${evaluation}-of-${CourseName}-input-li`.replace(/°/g, "")).replace(/ /g, "")).toLocaleLowerCase();
        li_inputs.className = "list-group-item";
        (document.getElementById(`${CourseName}-input-ul`).appendChild(li_inputs));

        //Here starts the important stuff, creation of the inputs and attributes
        const text_input = document.createElement('input');
        text_input.type = 'text';
        text_input.placeholder = `Nota de ${evaluation} (${percentage_value}%)`;
        text_input.id = ((`${evaluation}-of-${CourseName}-input-text`.replace(/°/g, "")).replace(/ /g, "")).toLocaleLowerCase();
        text_input.className = 'form-control grade-input';
        (document.getElementById(((`${evaluation}-of-${CourseName}-input-li`.replace(/°/g, "")).replace(/ /g, "")).toLocaleLowerCase())).appendChild(text_input);

    }
    );

    //Creating the button
    const SendAndShow = document.createElement('button');
    SendAndShow.textContent = 'Calcular';
    SendAndShow.id = 'send-and-show-button';
    SendAndShow.disabled = true; //Desactivated from the beggining
    SendAndShow.className = 'btn btn-dark';
    document.getElementById('second-column').appendChild(SendAndShow);

    //Here I want to loop through the inputs. If they are all filled, SendAndShow.disabled = false
        
    //A random event set to be activated once the button is clicked
    document.getElementById('send-and-show-button').onclick = function() {
    .
    . //Something to do
    .
    }

I have tried querySelectorAll and getting the element by class but I can't seem to be able to hack it, any suggestions? Note : I would like a pure JS answer, no JQuery.

CodePudding user response：

You can use the onchange method in every input element, then check the values of inputs with FormData

const form = document.querySelector('#form')

function getFormData() {
  formData = new FormData(form)
  console.log(formData.entries())
}

text_input.onchange = function(){
  getFormData()
}

<form id='form'></form>

CodePudding user response：

for dynamic element add listener to the parent or body then check your input elements

createInput.addEventListener('click', function() {
  let input = document.createElement('input')
  myform.prepend(input)
  submit.setAttribute('disabled', '')
})

// the parent
myform.addEventListener('input', function(el) {
  if (el.target.tagName != 'INPUT') return;
  
  // chack all input
  let allFilled = true
  document.querySelectorAll('#myform input').forEach(function(input) {
    if (!input.value)
      allFilled = false;
  })
  
  // set the button state
  if (allFilled)
    submit.removeAttribute('disabled')
  else
    submit.setAttribute('disabled', '')
})

input{display:block;margin:10px;}

<button id="createInput">Create input</button><br><br>
<form id="myform">
  <button id="submit" disabled>Submit</button>
</form>