How To Temporarily Disable lname Textbox When fname Is Empty? [closed]

Question

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.

This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.

Closed 10 months ago.

Improve this question

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>

Also wrap the fields in the label and give the label display: block and a margin-bottom instead of the <br> saving you the for and the brs — mplungjan
– mplungjan, Commented Jan 5 at 13:51

mplungjan · Accepted Answer · 2025-01-05 14:33:33Z

1

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>

edited Jan 5 at 14:33

answered Jan 5 at 13:59

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

KooiInc · Accepted Answer · 2025-01-11 10:13:57Z

1

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>

edited Jan 11 at 10:13

answered Jan 5 at 13:31

KooiInc

124k32 gold badges145 silver badges181 bronze badges

2 Comments

chrwahl Jan 10 at 20:44

Try inserting a text in fname using right mouse click and paste in the context menu -- does it work? There are many ways that you can change the value of an input element.

KooiInc Jan 11 at 10:14

@chrwahl sure. Fixed.

chrwahl · Accepted Answer · 2025-01-10 21:20:32Z

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>

Naren Murali · Accepted Answer · 2025-01-05 13:55:38Z

-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.
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>

edited Jan 5 at 13:55

answered Jan 5 at 12:48

Naren Murali

66.1k6 gold badges51 silver badges96 bronze badges

1 Comment

chrwahl Jan 10 at 20:43

Try inserting a text in fname using right mouse click and paste in the context menu -- does it work? There are many ways that you can change the value of an input element.

Sakshi Kasera · Accepted Answer · 2025-01-05 15:17:59Z

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

answered Jan 5 at 15:17

Sakshi Kasera

11 bronze badge

2 Comments

Community Jan 5 at 15:59

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

chrwahl Jan 10 at 20:43

Try inserting a text in fname using right mouse click and paste in the context menu -- does it work? There are many ways that you can change the value of an input element.

Collectives™ on Stack Overflow

How To Temporarily Disable lname Textbox When fname Is Empty? [closed]

5 Answers 5

Comments

2 Comments

Comments

1 Comment

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

Comments

1 Comment

2 Comments

Related