Disable button when condition is true

Question

I have the below code in a external script and when the condition is true the message echo's to the login screen (this works fine). As a test I want the submit button to be disabled too, but how to achieve that? The ID of the button is "btn_input"

if(txtboxval == "" || emailboxval == "")
{
  document.getElementById("announcement").innerHTML="This is a text!";
  return;
}

Is this possible?

Are you looking for [`setAttribute`](https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute)? There is an example with exactly what you need. — Lain, Oct 19 '22 at 11:33
https://stackoverflow.com/questions/38804924/disabling-a-button-in-vanilla-javascript-and-in-jquery - check this — Valeriu Ciuca, Oct 19 '22 at 11:34
Does this answer your question? [Disabling a button in vanilla JavaScript and in jQuery](https://stackoverflow.com/questions/38804924/disabling-a-button-in-vanilla-javascript-and-in-jquery) — Valeriu Ciuca, Oct 19 '22 at 11:35

score 0 · Answer 1 · edited Oct 20 '22 at 11:31

0

disable the button:

document.getElementById(BUTTON_ID).disabled = true;

re-enable the button:

document.getElementById(BUTTON_ID).removeAttribute('disabled');

edited Oct 20 '22 at 11:31

desertnaut

57,590
26
140
166

answered Oct 19 '22 at 11:34

Mohamad Ahmadi

248
2
7

score 0 · Answer 2 · answered Oct 19 '22 at 12:14

If you want to imperatively disable the submit button, you can listen to changes on the form and evaluate the result of the checkValidity() method.

const formDataToObject = (formData) => {
  const result = {};
  for (const [key, value] of formData) {
    Object.assign(result, { [key]: value });
  }
  return result;
};

const onSubmit = (event) => {
  event.preventDefault();
  const formData = new FormData(event.target);
  const data = formDataToObject(formData);
  alert(JSON.stringify(data, null, 2));
};

const onFormInput = (e) => {
  // When restting, the form validation passes before the clear happens
  // Let's wait 0.1 seconds and then set disabled
  setTimeout(() => {
    const form = e.target.closest('form');
    const submitButton = form.querySelector('button[type="submit"]');
    if (form.checkValidity()) {
      submitButton.removeAttribute('disabled');
    } else {
      submitButton.setAttribute('disabled', '');
    }
  }, 100);
};

document.forms.login
  .addEventListener('input', onFormInput);

document.forms.login.querySelector('button[type="reset"]')
  .addEventListener('click', onFormInput);

html, body { width: 100%; height: 100%; margin: 0; }
body { display: flex; flex-direction: column; justify-content: center; align-items: center; }
form { display: grid; grid-template-columns: auto auto; grid-column-gap: 1rem; grid-row-gap: 0.5rem; }
form .actions { grid-column: 1 / 3; display: flex; justify-content: center; gap: 0.5rem; }

<form name="login" onsubmit="onSubmit(event)">
  <label for="username-id">Username</label>
  <input type="text" id="username-id" name="username" required />
  <label for="password-id">Password</label>
  <input type="password" id="password-id" name="password" required />
  <div class="actions">
    <button type="reset">Reset</button>
    <button type="submit" disabled>Submit</button>
  </div>
</form>

Disable button when condition is true

2 Answers2