HTML Radio Button Action - open input-CodePudding

I want to display a "We're sorry..." message and the "black box" only when the radio button is YES otherwise don't show it.

Do I need to do that only with JavaScript, or is it possible with HTML only?

<h3 >Did you encounter any issues during your stay?</h3>

<label class="container">Yes
    <input type="radio" name="radio">
        <span class="checkmark"></span>
</label>

<label class="container">No
    <input type="radio" checked="checked" name="radio">
        <span class="checkmark"></span>
</label>

<h3 >We’re so sorry to hear this.
    <br>
    If you would like to share, please tell us what happened.
</h3>

<input type="text" id="problem" name="problem" style = "height: 200px; background-color: #a4acba; border-color: black;">

Thanks in advance.

CodePudding user response：

Add a change event listener on the radio buttons that checks whether the value is YES, and if so, shows the div:

document.querySelectorAll('input[type="radio"][name="radio"]').forEach(e => {
  e.addEventListener('change', function() {
    if (this.value == "YES") {
      errorexpanded.style.display = "block";
    } else {
      errorexpanded.style.display = "none";
    }
  })
})

#errorexpanded {
  display: none;
}

<h3>Did you encounter any issues during your stay?</h3>

<label class="container">Yes
      <input type="radio" name="radio" value="YES">
      <span class="checkmark"></span>
    </label>

<label class="container">No
      <input type="radio" checked="checked" name="radio" value="NO">
      <span class="checkmark"></span>
    </label>

<div id="errorexpanded">
  <h3>We’re so sorry to hear this.<br> If you would like to share, please tell us what happened.</h3>

  <input type="text" id="problem" name="problem" style="height: 200px; background-color: #a4acba; border-color: black;">
</div>

CodePudding user response：

Hopefully this provides some insight as to how you could accomplish this task using javascript.

I first wrapped the part you want hidden in a div, and did an inline styling to make the display none.

I added an event listener to each radio button, and if the text of it's parent when clicked is "Yes", then we show the element. Otherwise, we hide the element.

<h3> Did you encounter any issues during your stay ? </h3>

<label class="container"> Yes <input type="radio" name="radio">
  <span class="checkmark">
  </span>
</label>

<label class="container"> No <input type="radio" checked="checked" name="radio">
  <span class="checkmark">
  </span>
</label>

<div style="display: none;" class="showIfNo">
  <h3>
    We’ re so sorry to hear this. <br>
    If you would like to share, please tell us what happened.
  </h3>

  <input type="text" id="problem" name="problem" style="height: 200px; background-color: #a4acba; border-color: black;">
</div>

<script type="text/javascript">
  document.querySelectorAll("input[type='radio']")
    .forEach(radio => {
      radio.addEventListener("click", e => {
        const selected = e.target.parentElement.innerText.trim();
        console.log(selected);
        if (selected === "Yes") document.querySelector(".showIfNo").style.display = "block";
          else document.querySelector(".showIfNo").style.display = "none";
      });
    });
</script>