CODEWITHSUNDEEP
javascripthtmlformsdrop-down-menutextinput
ginomay89
ginomay89

Reputation: 259

How to select from a drop down list AND type in text

I am making form with a select drop down that lists people's names.

I would also like the form to give you the option to select 'Other' and then actually type in someones name (like a normal text input box) if that person is not available from the list.

I don't want the text input part to appear in a separate box underneath the drop down list, I would like it all within the same box.

Is it possible to do with this in vanilla javascript and no jquery plugin?

<form action="" method="post">
    <br>
    List of people: 
    <select>
      <option>John Doe</option>
      <option>Jane Doe</option>
      <option>Richard Doe</option>
      <option>Other (type name here)</option>
    </select>
    <br><br>
    <input type="submit" value="Submit">
    <br><br>
</form>

Upvotes: 0

Views: 1279

Answers (1)

Vic Segers
Vic Segers

Reputation: 197

You could do something like the code below. It's fully adjustable to your likings.

let list = document.getElementById("list");
let other = document.getElementById("other");

function checkValue() {
    if (list.value === "Other (type name here)") {
        other.style.visibility = "visible";
        list.style.display = "none"
    } else {
        other.style.visibility = "hidden";
    }
}
<form action="" method="post">
  <br />
  List of people:
  <select id="list" onchange="checkValue()">
    <option>John Doe</option>
    <option>Jane Doe</option>
    <option>Richard Doe</option>
    <option>Other (type name here)</option>
  </select>
  <input type="text" style="visibility: hidden" id="other" />
  <br /><br />
  <input type="submit" value="Submit">
  <br /><br />
</form>

Upvotes: 2

Related Questions