Form submission confirmation without Javascript

[alejsanc]

Before submitting a form that is going to perform a dangerous action such as data deletion it is advisable to ask for confirmation. At present it is necessary to use Javascript to intercept the sending and display the message. The browser could take care of this automatically if the message was indicated on the submit button.

<button type="submit" confirmation-message="Are you sure you want to delete de items?">Delete</button>

[korenevskiy]

It would be convenient to call the attribute ALERT <button type="submit" alert="Are you sure you want to delete de items?">Delete</button>

[gregwhitworth]

@alejsanc thanks for filing this. Do you know if this is a common paradigm used by web developers? If you're unsure it would be great to have some research into if the addition of this will be leveraged by web developers based on patterns across the industry. Let me know if you need help on getting started with that.

[alejsanc]

It is something that has always been widely used in any type of application, both web and desktop, before executing a dangerous action such as deleting data.

Some examples of all kinds

Form confirmation before submit Google query

[github-actions[bot]]

There hasn't been any discussion on this issue for a while, so we're marking it as stale. If you choose to kick off the discussion again, we'll remove the 'stale' label.

[korenevskiy]

@alejsanc thanks for filing this. Do you know if this is a common paradigm used by web developers? If you're unsure it would be great to have some research into if the addition of this will be leveraged by web developers based on patterns across the industry. Let me know if you need help on getting started with that.

@gregwhitworth Every developer faces this. And every developer needs to reinvent the wheel to come up with a confirmation window. Moreover, in elementary schools for web development, they teach simple techniques, including making a confirmation window.

[github-actions[bot]]

There hasn't been any discussion on this issue for a while, so we're marking it as stale. If you choose to kick off the discussion again, we'll remove the 'stale' label.

[faizanakram99]

bump (to remove the stale tag)

[github-actions[bot]]

There hasn't been any discussion on this issue for a while, so we're marking it as stale. If you choose to kick off the discussion again, we'll remove the 'stale' label.

[faizanakram99]

bump (to remove the stale tag)

[github-actions[bot]]

There hasn't been any discussion on this issue for a while, so we're marking it as stale. If you choose to kick off the discussion again, we'll remove the 'stale' label.

[lukewarlow]

@faizanakram99 are you interested in pulling the neccesary research together to get an idea for if this is handled by any design systems currently?

[faizanakram99]

@faizanakram99 are you interested in pulling the neccesary research together to get an idea for if this is handled by any design systems currently?

yes sure

[keithamus]

It seems this can be expressed using <dialog> and invoketarget, by moving the form submission into the confirmation dialog, no?

<button invoketarget=confirm>Delete</button>

<dialog id=confirm>
  <form action="/delete">
    <input type="hidden" name="id" value="123">
    <p>Are you sure you want to delete?</p>
    <button>Yes</button>
    <button type="button" invoketarget="confirm">No</button>
  </form>
</dialog>

[lukewarlow]

The only thing that wouldn't handle is more complex form submissions but I can't think of a time I've ever put a confirmation on something that isn't a delete action.

Or I guess more generically a simple button action which your example perfectly demonstrates.

[alejsanc]

It seems this can be expressed using <dialog> and invoketarget, by moving the form submission into the confirmation dialog, no?

This is more complex than using javascript. The reason for removing javascript is to make it easier. Anything more complex is not useful.

[faizanakram99]

It seems this can be expressed using <dialog> and invoketarget, by moving the form submission into the confirmation dialog, no?

<button invoketarget=confirm>Delete</button>

<dialog id=confirm>
  <form action="/delete">
    <input type="hidden" name="id" value="123">
    <p>Are you sure you want to delete?</p>
    <button>Yes</button>
    <button type="button" invoketarget="confirm">No</button>
  </form>
</dialog>

yes it can also be achieved by using popovertarget attribute on button and having the actual form inside the popover, both require changing the markup though ...

[lukewarlow]

both require changing the markup though ...

So would a new "confirmationmessage" attribute?

[alejsanc]

It seems this can be expressed using <dialog> and invoketarget, by moving the form submission into the confirmation dialog, no?

How would this help if it is necessary to select and send multiple IDs?

[keithamus]

If you wanted to select and send multiple IDs you could add checkboxes for the parent form that point to the confirmation in the dialog. I believe the following would work:

<label>
  <input form="confirm_form" type="checkbox" name="id[]" value="123">
  Delete 123
</label>
<label>
  <input form="confirm_form" type="checkbox" name="id[]" value="456">
  Delete 456
</label>
<button invoketarget=confirm>Delete</button>

<dialog id=confirm>
  <form id="confirm_form" action="/delete">
    <p>Are you sure you want to delete?</p>
    <button>Yes</button>
    <button type="button" invoketarget="confirm">No</button>
  </form>
</dialog>

[keithamus]

this is more complex than using javascript.

This is true if your JavaScript is if (confirm('Are you sure you want to delete?'))..., but for anything more (for example customising the button labels, adding visuals like iconography, having richer message text, styling the controls) then one would have to resort to some kind of markup. I believe the above is the ideal markup for those scenarios. If you disagree I would love to see some counter examples!

[alejsanc]

If you wanted to select and send multiple IDs you could add checkboxes for the parent form that point to the confirmation in the dialog. I believe the following would work:

Generally the forms has more actions than Delete. Inputs cannot be assigned to a form created solely for deletion.

[lukewarlow]

Sounds like you're making a form that can do multiple things at once and you want some branching to determine whether to confirm. At that point you're better off just doing it in JavaScript no?

As I said above it'd be great if someone could see how design systems handle this currently (if at all) possibly they're more flexible than I imagine.

[alejsanc]

this is more complex than using javascript.

This is true if your JavaScript is if (confirm('Are you sure you want to delete?'))...,

Most of the time all you need is that. No need to make it more complicated.

For something more complex you could add the "confirm-dialog" attribute indicating a dialog that is part of the form and can send it. Or something like your example where the button sends the origin form. As simple as possible.

<button type="submit" confirmation-dialog="delete-confirm">Delete</button>

<dialog id="delete-confirm">
    <p>Are you sure you want to delete?</p>
    <button type="submit" value="delete">Yes</button>
    <button type="close">No</button>
 </dialog>

<form id="items">
<label>
  <input  type="checkbox" name="id[]" value="123">
  Delete 123
</label>
<label>
  <input type="checkbox" name="id[]" value="456">
  Delete 456
</label>
<button invoketarget=confirm>Delete</button>
</form>

<dialog id=confirm>
    <p>Are you sure you want to delete?</p>
    <button form="items" type="submit" value="delete">Yes</button>
    <button form="items" type="close">No</button>
</dialog>

[alejsanc]

Sounds like you're making a form that can do multiple things at once and you want some branching to determine whether to confirm. At that point you're better off just doing it in JavaScript no?

As I said above it'd be great if someone could see how design systems handle this currently (if at all) possibly they're more flexible than I imagine.

What I have done is add the "data-confirmation-message" attribute to the button. All button presses are intercepted by Javascript and if they have that attribute it asks for confirmation. It is something very simple and useful that can be easily added to browsers.

<button data-confirmation-message="Are you sure you want to delete the selected objects?" type="button" value="delete">Delete</button>`

var confirmationMessage = button.getAttribute("data-confirmation-message");

if (confirmationMessage != null) {
    execute = confirm(confirmationMessage);
}

NextTypes Project

[alejsanc]

And in addition to this it would be convenient to add other things to the forms. Everything working together to make the forms more powerful.

Forms lack basic functionality

All these things are tested in my NextTypes project

[faizanakram99]

Sounds like you're making a form that can do multiple things at once and you want some branching to determine whether to confirm. At that point you're better off just doing it in JavaScript no?

As I said above it'd be great if someone could see how design systems handle this currently (if at all) possibly they're more flexible than I imagine.

htmx does that by hx-confirm attribute, https://htmx.org/attributes/hx-confirm/

[alejsanc]

Apex

In Apex buttons have a "Requires Confirmation" property.

Power Buttons

<button type="button" data-confirm="are you sure you want to submit this form?">submit</button>

OutSystems

Buttons have a "Confirmation Message" property.

[github-actions[bot]]

There hasn't been any discussion on this issue for a while, so we're marking it as stale. If you choose to kick off the discussion again, we'll remove the 'stale' label.