CODEWITHSUNDEEP
javascripthtmltextboxdisable
ras bry
ras bry

Reputation: 19

How To Temporarily Disable lname Textbox When fname Is Empty?

I want to temporarily disable lname textbox when the fname textbox is empty, but if the fname is not empty the lname should be enabled.

I have a code but I don't think it is correct nor wrong.

const fname = document.querySelector(".fname");
const lname = document.querySelector(".lname");

lname.readonly = true;
fname.addEventListener("keyup", () => {
  if (fname.value.length > 0) {
    lname.readonly = false;
  } else {
    lname.readonly = true;
  }

})
<form action="/action_page.php">
  <label for="fname">Fname:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Lname:</label>
  <input type="text" id="lname" name="lname" disabled><br><br>
  <input type="submit" value="Submit">
</form>

Upvotes: 1

Views: 88

Answers (5)

KooiInc
KooiInc

Reputation: 122966

A short solution, using event delegation (note: enables last name field when first name field value length >= 3).

document.addEventListener(`input`, handle);

function handle(evt) {
  if (evt.target.id === `fname`) {
    return document.querySelector(`#lname`).disabled = 
      evt.target.value.length < 3;
  }
}
<!doctype html>
<html>
  <body>
    <form action="/action_page.php">
      <label for="fname">Fname:</label>
      <input type="text" id="fname" name="fname" /><br /><br />
      <label for="lname">Lname:</label>
      <input type="text" id="lname" name="lname" disabled/><br /><br />
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>

Upvotes: 1

chrwahl
chrwahl

Reputation: 13145

Get rid of all the global variables, and then use the input event instead of the keyup event. The input event will fire each time the value of the input element changes, no matter how the text was entered (using keyboard, mouse context menu, drag'n'drop etc.).

If you set the required property on fname you can test if the value is somehow valid. In the example I use e.target.validity.valueMissing to decide if the lname should be disabled. If you set the minlength attribute on the input element you can also use e.target.validity.tooShort to test if it is valid.

And also, try not to use IDs, they need to be unique throughout the document. Use the name attribute on the form and input elements and refer to the elements using the dot-notation.

document.forms.form01.fname.addEventListener('input', e => {
  e.target.form.lname.disabled = e.target.validity.valueMissing;
});
form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}
<form name="form01" action="/action_page.php">
  <label>Fname: <input type="text" name="fname" minlength="3" required></label>
  <label>Lname: <input type="text"name="lname" disabled></label>
  <button type="submit">Submit</button>
</form>

Usability-wise this disabling of the lname input is maybe not a good idea. An alternative could be to have both input elements required. Basically you don't care about in what order the user types first and last name. This could be an alternative:

form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}
<form name="form01" action="/action_page.php">
  <label>Fname: <input type="text" name="fname" required></label>
  <label>Lname: <input type="text"name="lname" required></label>
  <button type="submit">Submit</button>
</form>

Upvotes: 0

Sakshi Kasera
Sakshi Kasera

Reputation: 1

const fname = document.querySelector("#fname")
const lname = document.querySelector("#lname")
fname.addEventListener("keyup", () => {
  if (fname.value.length > 0) {
    lname.disabled = false;
  } else {
    lname.disabled = "true";
  }
})
<!doctype html>
<html>
  <body>
    <form action="/action_page.php">
      <label for="fname">Fname:</label>
      <input type="text" id="fname" name="fname" /><br /><br />
      <label for="lname">Lname:</label>
      <input type="text" id="lname" name="lname" disabled/><br /><br />
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>

Upvotes: -1

mplungjan
mplungjan

Reputation: 178375

As already said, you need to use the ID selector or getElementById.

Here is a much simpler version

const lname = document.getElementById('lname');
document.getElementById('fname')
  .addEventListener('input', () => lname.disabled = fname.value.trim().length === 0);
label {
  display: block;
  margin-bottom: 5px;
}
<form action="/action_page.php">
  <label>Fname: <input type="text" id="fname" name="fname" /></label>
  <label>Lname: <input type="text" id="lname" name="lname" disabled /></label>
  <input type="submit" value="Submit" />
</form>

Upvotes: 1

Naren Murali
Naren Murali

Reputation: 57986

  1. We should select using #fname since, we are having the ID field as fname, the selector you used is for classes. We can go for the more specific getElementById to fetch the element by ID.

  2. We can use setAttribute and removeAttribute to toggle the disabled condition.

const fname = document.getElementById("fname")
const lname = document.getElementById("lname")
fname.addEventListener("keyup", () => {
  if (fname.value.length > 0) {
    lname.removeAttribute("disabled")
  } else {
    lname.setAttribute("disabled", "true")
  }
})
<!doctype html>
<html>
  <body>
    <form action="/action_page.php">
      <label for="fname">Fname:</label>
      <input type="text" id="fname" name="fname" /><br /><br />
      <label for="lname">Lname:</label>
      <input type="text" id="lname" name="lname" disabled/><br /><br />
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>

Upvotes: -1

Related Questions