Html Question posted in
Some basic documentation can be found here.

Html – disable textbox

I want to temporarily disable lname textbox because the fname is empty, but if the fname is not empty the lname is enabled. I have a code but I don’t think it is correct or wrong, you can visit my code here https://jsfiddle.net/Jayme207/ejks5xqL/12/

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>
Tags:

4

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

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

    document.addEventListener(`keyup`, 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>
    Login or Signup to reply.
  3. 0

    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>
    Login or Signup to reply.
  4. 0 
    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search