0

So I'm trying to make my form only show the "Read Terms" button after all of the required elements are filled. I came across this to get the required elements but now when I try to get the value of the elements they return undefined in the Chrome developer tools.

// Show Terms Button only if all required elements are filled.
let termsButton = document.getElementById("termsButton");
let allRequired = document.getElementById("contactForm").querySelectorAll("[required]");
const checkForRequiredDone = () =>{
    if (allRequired.value != undefined && allRequired.value != "" && allRequired.value != null){
        termsButton.style.display = "block";
    }else{
        termsButton.style.display = "none;"
    }
}

Since I'm testing for not undefined, even if all of the required elements are filled the button is still showing.

Also this is on an onchange attribute on the form element.

And also I do have jQuery but I thought this would be easier in JS...

Kenneth Rhodes
  • 97
  • 1
  • 1
  • 9
  • 1
    `querySelectorAll` returns a **list**. The list doesn't have a `value` property. The elements in it do (assuming their form fields). – T.J. Crowder May 08 '18 at 15:55
  • @T.J.Crowder After looking at the similar question and answer, I'm still not sure how I would go about getting the values of each and checking if they aren't equal to undefined or blank or null. I've tried multiple methods using for... – Kenneth Rhodes May 12 '18 at 01:11
  • 1
    A loop is indeed how you'd do it. Or apply `Array#some` or `Array#every` to the NodeList: `if (Array.prototype.some.call(allRequired, element => !element.value)) { /* At least one is blank */ } else { /* All are non-blank */ }` Also note that the `value` of an element will never be `undefined` or `null`, it's a string. – T.J. Crowder May 12 '18 at 10:29
  • Thank you! This worked well. – Kenneth Rhodes May 17 '18 at 17:15

0 Answers0