Problem

• Before asking this question, I read through the MDN page for HTML dialog and saw the examples too (one that has a select with option) and the other the uses returnValue to return a value
• I have a button called "Delete Account"
• When I click on this button, it needs to pop open a modal HTML dialog that asks the user if they really want to do this
• It has a required password field that the user needs to fill
• It also has a "Cancel" button that closes the dialog and
• Another "Confirm" button that actually executes the logic necessary to delete the account like sending a confirmation email and then closes the dialog
• There is some confusion and hopefully someone here can clarify

Questions

1) What is the difference between these two?

Form with no method but formmethod="dialog" set on input

<button onclick="showDialogOne()">Delete Account One</button><dialog id="dialog-one" closedBy="none"><form><h1>Delete Account?</h1><p>Are you sure you want to delete your account <br /> This action cannot be undone!</p><label for="password">Password</label><input class="password" id="password" required type="password" /><input formmethod="dialog" formnovalidate type="submit" value="Cancel" /><input type="submit" value="Confirm" /></form></dialog>

Form with method dialog

<button onclick="showDialogTwo()">Delete Account Two</button><dialog id="dialog-two" closedBy="none"><form method="dialog"><h1>Delete Account?</h1><p>Are you sure you want to delete your account <br /> This action cannot be undone!</p><label for="password">Password</label><input class="password" id="password" required type="password" /><input formnovalidate type="submit" value="Cancel" /><input type="submit" value="Confirm" /></form></dialog>

2) Use onclick event or submit event for confirm button?

• I am looking to specifically implement this in svelte 5
• Should I use onclick or onsubmit? The examples on MDN use addEventListener everywhere
• If using onsubmit, how do I distinguish between cancel and confirm? since both are submit buttons, they both ll fire submit event, no?

Svelte playground

Svelte playground setup with 2 dialogs How do I handle events from the submit button? Should I use onclick or onsubmit? The examples on MDN are always using addEventListener