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.
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>