youngP
youngP

Reputation: 17

Uncaught TypeError: Cannot read properties of undefined reading 'forEach'

Good day everyone, I'm trying to make a javascript code to scan through all the input in my form like so:

<form> 
  <input class="formInputOne" />
<input class="formInputOne" />
<input class="formInputOne" />
<input class="button" type="submit" />
</form> 

Now I want my javascript code to scan through all of them and know if they are empty or not like so:

button.addEventListener("click", function () {
  let formInputOne = document.querySelectorAll(".formInputOne").value;
  if (formInputOne.forEach == "") {
    console.log("All fields are required!");
  } else {
   console.log("Yay! All fields got values");
  }
});

I'm really curious to find out a way to loop through all the inputs and know if they contain values.

Please I'm using javascript, but if it can be done with jquery, no probs. Thanks.

Upvotes: 0

Views: 396

Answers (1)

Sakil
Sakil

Reputation: 652

Select inputs, loop through it, get value and log based on value

let inputs = $('.formInputOne').toArray(); //document.querySelectorAll('.formInputOne')
inputs.forEach(e => {
    let value = e.value.trim();
    if (value == "") {
        console.log("All fields are required!");
    } else {
        console.log("Yay! All fields got values");
    }
});

//Check if atleast one value is empty
let bool = inputs.map(a => a.value.trim()).some(a => a == "");
console.log('Empty value is present', bool);

Upvotes: 1

Related Questions