简体   繁体   中英

Disable send button if input fields are empty

I want to implement a check function, that checks if the input fields are empty - if empty, the send button should be disabled. i used the addEventListener method.

When i debug it, the else statement is triggering, but it returns true and i don't know why.

here's the code:

//all the form fields saved as variables
const form = document.getElementById("form");
const name = document.getElementById("name");
const email = document.getElementById("email");
const text = document.getElementById("text");
const button = document.getElementById("button");




form.addEventListener("change", buttoActivationCheck());
  





//custom functions

function buttoActivationCheck() {
  const nameValueForButton = name.value.trim();
  const textValueForButton = text.value.trim();
  const emailValueForButton = email.value.trim();

  if (nameValueForButton === "") {
    button.disabled = true;
  }
  if (emailValueForButton === "") {
    button.disabled = true;
  }

  if (textValueForButton === "") {
  button.disabled = true;
  }
  
  else {
    
    button.disabled = false;
  }
}

Probably you no need else at all.

function buttoActivationCheck() {
  const nameValueForButton = name.value.trim();
  const textValueForButton = text.value.trim();
  const emailValueForButton = email.value.trim();

  button.disabled = false;

  if (nameValueForButton  === "" || 
      emailValueForButton === "" || 
      textValueForButton  === "") button.disabled = true;
}

Or just:

function buttoActivationCheck() {
  button.disabled = !Boolean(name.value.trim() && text.value.trim() && email.value.trim());
}

Button is false if every of the values is true.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM