EN VI

Javascript - How do I retrieve the values of a radio group from an HTML dialog?

index.html:

  <body>
    <dialog class="dialog">
      <form class="report__form" method="dialog">
        <div>
          <input type="radio" name="report" vale="vulgar" />
          <label for="vulgar">Vulgar/Offensive Language</label>
        </div>
        <div>
          <input type="radio" name="report" vale="duplicate" />
          <label for="Duplicate">Duplicate</label>
        </div>
        <div>
          <input type="radio" name="report" vale="broken" />
          <label for="broken">Broken</label>
        </div>
        <button class="dialog__submit">Submit</button>
      </form>
    </dialog>
    <button class="open">open dialog</button>
    <script src="script.js"></script>
  </body>

script.js:

const dialog = document.querySelector(".dialog");
const reportForm = document.querySelector(".report__form");
const submitButton = document.querySelector(".dialog__submit");
const openButton = document.querySelector(".open");

openButton.addEventListener("click", () => {
  dialog.showModal();
});

I'm having a hard time figuring out how to retrieve the radio input values within an HTML dialog. I read the MDN docs on radio inputs but am still struggling to get it to work within the context of a dialog. I figure I need to set a default value, loop through the inputs, and update that value if I click one of them, but I can't get it to work.

Solution:

Firstly you need to give each checkbox a value attribute, not a vale attribute. From there you can select the :checked element when the form is submit and process it as required.

Also note that the for attributes in the label elements need to match the id of the checkbox. As your checkboxes have no id, this is not working. Although you can simplify this by wrapping the checkboxes in the label elements, that way you don't need to include the for attribute at all.

Here's working example with the above changes made:

const dialog = document.querySelector(".dialog");
const reportForm = document.querySelector(".report__form");
const openButton = document.querySelector(".open");

openButton.addEventListener("click", () => {
  dialog.showModal();
});

reportForm.addEventListener('submit', e => {
  const selectedValue = reportForm.querySelector('input[type="radio"]:checked').value;
  console.log(selectedValue);
});

<dialog class="dialog">
  <form class="report__form" method="dialog">
    <div>
      <label>
        <input type="radio" name="report" value="vulgar" />
        Vulgar/Offensive Language
      </label>
    </div>
    <div>
      <label>
        <input type="radio" name="report" value="duplicate" />
        Duplicate
      </label>
    </div>
    <div>
      <label>
        <input type="radio" name="report" value="broken" />
        Broken
      </label>
    </div>
    <button class="dialog__submit">Submit</button>
  </form>
</dialog>
<button class="open">open dialog</button>