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

Html – Clicking on Radio button should change textbox to dropdown list

I have a text box and 2 radio buttons in my ASP.Net Core MVC web page as shown below:

Screenshot of the issue

If the "Existing" radio button is clicked, the text box should change to a dropdown list. And if the "New" radio button is clicked, the dropdown list should be changed to the textbox. Since I am very new the web technology, I don’t know how to do it. please help.

.table1 {
  display: inline-block
}
<div class="table1">
  <label> Level 3 Num</label>
  <input type="text" name="text1" class="l3n" placeholder="Level 3 Num" maxlength="100" style="margin:5px;width:400px; height:30px;border:1px solid #01579B;" />
  <label>
        <input type="radio" name="editList" value="new" />New
      </label>
  <label>
        <input type="radio" name="editList" value="existing" />Existing
      </label>
</div>
Tags:

3

Answers


  1. 0

    So first you need to add an ‘id’ to your input so it looks like this:

    <input type="text" **id = 'new'** name="text1" class="l3n" placeholder="Level 3 Num" maxlength="100" style="margin:5px;width:400px; height:30px;border:1px solid #01579B;" />

    and then create a Select tag with id="existing" tag and a display of ‘none’ that will hold your existing options.
    Once you’ve done that you just need a event handler :

    function handleChange(e){
switch ( e.target.value) {
  case 'new':
    document.getElementById('new').style.display = 'block'
    document.getElementById('existing').style.display = 'none'
    break;

  case 'existing':
    document.getElementById('new').style.display = 'none'
    document.getElementById('existing').style.display = 'block'
    break;
}

    }

    Login or Signup to reply.
  2. 0

    You can use the following code as suggested by @Yogi using datalist. You also need to use an event listener for each radio button. I used conditional ternary operator (same as if statement) to remove or keep the list attribute on the input box. You just need to add the code to read your input value

    const dataList = document.getElementById('datalist')
const radios = document.querySelectorAll('input[type=radio')
const dataListInput = document.getElementById('datalist-input')

radios.forEach((radio)=>{
    radio.addEventListener('change',(e)=>{
        radio.value == 'new' ? dataListInput.setAttribute('list',"") : dataListInput.setAttribute('list',"datalist")
    })
})
    .table1 {
    display: inline-block
  }
    <div class="table1">
        <label for="datalist-input"> Level 3 Num</label> 
        <input list="datalist" type="text" id="datalist-input" name="text1" id="datalist-input" class="l3n" placeholder="Level 3 Num" maxlength="100" style="margin:5px;width:400px; height:30px;border:1px solid #01579B;" />
        <datalist id="datalist">
            <option value="Chocolate"></option>
            <option value="Coconut"></option>
            <option value="Mint"></option>
            <option value="Strawberry"></option>
            <option value="Vanilla"></option>
        </datalist>
        <label>
          <input type="radio" name="editList" value="new" />New
        </label>
        <label>
          <input type="radio" name="editList" value="existing" />Existing
        </label>
      </div>
    Login or Signup to reply.
  3. 0

    Here is a version based on Mehdi’s code, but using delegation and setting initial list based on default checked

    const container = document.querySelector('.table1'),
  dataListInput = document.getElementById('datalist-input'),
  initial = document.querySelector('[name=editList]:checked').value,
  toggleList = (val) => dataListInput.setAttribute('list', val === 'new' ? "" : "datalist")

container.addEventListener('click', (e) => {
  const tgt = e.target;
  if (!tgt.matches('[name=editList]')) return; // not a radio
  toggleList(tgt.value);
});

toggleList(initial);
    .table1 {
  display: inline-block
}
    <div class="table1">
  <label for="datalist-input">Level 3 Num</label>
  <input list="datalist" type="text" id="datalist-input" name="text1" id="datalist-input" class="l3n" placeholder="Level 3 Num" maxlength="100" style="margin:5px;width:400px; height:30px;border:1px solid #01579B;" />
  <datalist id="datalist">
    <option value="Chocolate"></option>
    <option value="Coconut"></option>
    <option value="Mint"></option>
    <option value="Strawberry"></option>
    <option value="Vanilla"></option>
  </datalist>
  <label><input type="radio" name="editList" value="new" checked />New</label>
  <label><input type="radio" name="editList" value="existing" />Existing</label>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search