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

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.

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    This is based on the MDN documentation.
    Explanation- From MDN

    Form– An HTML element — when specified, the FormData object will be populated with the form’s current keys/values using the name property of each element for the keys and their submitted value for the values. It will also encode file input content.

    This FormData object contains the selected input value under a key named after the name value you specified under by name in the input, which is, in your case- name="report".

    const form = document.querySelector("form");
const openDialog = document.getElementById("opDialog");
const dialog = document.getElementById("dialog1");


opDialog.addEventListener("click", () => {
  dialog.showModal();
  console.clear();
});

form.addEventListener("submit", doThis);

function doThis() {
  let data = new FormData(form);
  for (const entry of data) {
    console.log(entry[1]);
  }
  dialog.close();
  event.preventDefault();
}
    <dialog id="dialog1" class="dialog">
  <form class="report__form" method="dialog">
    <div>
      <input type="radio" name="report" value="vulgar" selected />
      <label for="vulgar">Vulgar/Offensive Language</label>
    </div>
    <div>
      <input type="radio" name="report" value="duplicate" />
      <label for="Duplicate">Duplicate</label>
    </div>
    <div>
      <input type="radio" name="report" value="broken" />
      <label for="broken">Broken</label>
    </div>
    <menu>
      <button type="submit" value="confirmBtn">Confirm</button>
    </menu>

  </form>
</dialog>
<button id="opDialog" class="open">open dialog</button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search