CODEWITHSUNDEEP
javascriptif-statement
user10074612
user10074612

Reputation:

Enable and disable button by if

I have a problem with my js code. I have managed to disable the submit button, if there is no input value, but now I want to enable it again when a value is present. Thank you very much

// submit message
submitButton.addEventListener("click", (e) =>{
  if(userMessage.value = " ") {
    submitButton.setAttribute("disabled", true);
    alert("fill field");

  } if(userMessage.value != " ") {
    submitButton.setAttribute("disabled", false);
   alert("send");
  }
  // prevent default
  e.preventDefault();
})

Upvotes: 0

Views: 2983

Answers (6)

NoLogig
NoLogig

Reputation: 116

Simple and short approach:

  1. Disable submit <button> by default
  2. Attach oninput event to <input/> which toggles the disabled status of the<button>

try 

<input type="text" id="userMessage" value="" oninput="this.value == '' ?  document.querySelector('#submitButton').disabled = true : document.querySelector('#submitButton').disabled = false"/>
    
<button disabled id="submitButton">Submit</button>

Upvotes: 0

lumio
lumio

Reputation: 7585

There are several problems with your code:

  1. You assign the value of " " with = to the userMessage, but you probably intended to check if the value is empty or not. Either use == or even better ===.
  2. You are checking against a value that consists out of just one space (" " !== ""). Use .trim() to actually trim all whitespace around a value.
  3. The second if statement is exactly the opposite of the first one and can be written as an else statement.
  4. You also need to check if the input has changed, so the button would then be enabled again. You could just add an event listener on the input event of your text field here and enable/disable the button.
  5. Setting the attribute disabled to false with setAttribute won't work here as setAttribute converts it into a String. So technically it is still trueish. Instead directly set disabled on your input element, or use removeAttribute to get it enabled again.

Here is an example, using the input event for disabling and enabling the button. Note, that the button is not initially disabled. To fix that, I created the checkIfSet function, so I can just set it on the addEventListener and also just call it to check if the button needs to be disabled or not.

const submitButton = document.querySelector('#submitButton');
const userMessage = document.querySelector('#userMessage');

const checkIfSet = () => {
  const trimmedInput = userMessage.value.trim();
  if (trimmedInput == '') {
    submitButton.disabled = true;
    console.log('disabled');
  } else {
    submitButton.disabled = false;
    console.log('enabled');
  }
};

const submit = (e) => {
  console.log('send');
  e.preventDefault();
}

// submit message
userMessage.addEventListener('input', checkIfSet);
submitButton.addEventListener('click', submit);
checkIfSet();
button:disabled {
  background: red;
  opacity: .5;
}
<input type="text" id="userMessage" />
<button id="submitButton">button</button>

Upvotes: 0

dbor
dbor

Reputation: 1

add event on input 

//when page loads to be disabled 
submitButton.setAttribute("disabled", true);

//check when something is changed
userMessage.addEventListener("keyup", (e) =>{
  submitButton.setAttribute("disabled", this.value.trim() == "");
})

Upvotes: 0

henkthefixer
henkthefixer

Reputation: 15

Maby i dont understand it right but you want to click on a disabled button? To enable it? I dont think that works maby try it when the user types in the input field. So

// submit message
InputField.addEventListener("keyup", (e) =>{
  if(e.target.value = "") {
    submitButton.setAttribute("disabled", true);
    alert("fill field");

  } else if(e.target.value != "") {
    submitButton.setAttribute("disabled", false);
    alert("send");
 }
})

something like this

Upvotes: 0

jvk
jvk

Reputation: 2201

You assign a variable instead of condition and second one you are giving single space.

submitButton.addEventListener("click", (e) =>{
  if(userMessage.value == "") {
    submitButton.setAttribute("disabled", true);
    alert("fill field");

  } if(userMessage.value != "") {
    submitButton.setAttribute("disabled", false);
   alert("send");
  }
  // prevent default
  e.preventDefault();
})

Upvotes: 1

jonixj
jonixj

Reputation: 398

You could add an event listener to the input element and listen for the keyup event. like:

inputField.addEventListener('keyup', e => {
    submitButton.setAttribute("disabled", e.target.value === "");
});

Upvotes: 0

Related Questions