Menu
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.
639
asked Aug 30 '25 16:08
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>Prefer respecting Dialog logic :
use dialog.returnValue
because <dialog> element can be closed by Escape key
which invalidate any form input values
const
openButton = document.querySelector('.open')
, dialog = document.querySelector('.dialog')
, reportForm = document.querySelector('.report__form')
;
openButton.addEventListener('click',()=>
{
reportForm.reset();
dialog.returnValue = 'none'; // in case of Escape key used...
dialog.showModal(); // even if a radio button is checked
});
dialog.addEventListener('close',()=>
{
console.clear();
console.log('dialog.returnValue =', dialog.returnValue); // here it is !
});
reportForm.addEventListener('submit',()=>
{
dialog.close(reportForm.report.value); // set dialog.returnValue
}); // on dialog close eventlabel { display: block; cursor: pointer;}<dialog class="dialog">
<form class="report__form" method="dialog">
<label>
<input type="radio" name="report" value="vulgar" required >
Vulgar/Offensive Language
</label>
<label>
<input type="radio" name="report" value="duplicate" >
Duplicate
</label>
<label>
<input type="radio" name="report" value="broken" >
Broken
</label>
<button class="dialog__submit">Submit</button>
</form>
</dialog>
<button class="open">open dialog</button>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
