'Radio Input onchange display label innerText in textbox

 <div class="top">
      <label for="locationName">Location:</label>
      <input type="text" class="locationName" id="locationName" maxlength="20" readonly>
 </div>
 <li>
      <input type="radio" id="selected_location_ac" name="selected_location" value="ATLANTIC_CITY" onchange="findSelection('selected_location')">
      <label for="selected_location_ac">Atlantic City</label>
 </li>
 <li>
      <input type="radio" id="selected_location_ac" name="selected_location" value="LAS_VEGAS" onchange="findSelection('selected_location')">
      <label for="selected_location_ac">LAS Vegas</label>
 </li>

JavaScript

function findSelection(rad_name) {
    const locationName = document.querySelector("#locationName");
    let rad_val = document.querySelector('input[name=' + rad_name + ']:checked');
    locationName.value = (rad_val ? rad_val.value : "")
    return (rad_val ? rad_val.value : "");
}

I am trying to get the label value displayed in the input text box.

The person will click a radio button and then the input textbox will display their selection. I don't want it to show the radio button value since it maybe difficult to understand what it means.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source