在不丢失“提交”按钮值的情况下恢复中断的表单提交

Question

I have a simple function that intercepts a form submit event, displays a SweetAlert2 confirmation dialogue, and if the user confirms the form is submitted.

The function is something like this:

$(document).ready(function() {
    $('form.require-confirmation').submit(event => window.swalConfirm(event));
});

window.swalConfirm = function(e)
{
    e.preventDefault();

    Swal.fire().then((result) => {
        if (result.value) {
            e.target.submit();
        }
    })
};

This works as expected… in most cases. When the form has multiple submit buttons – for example:

<button type="submit" name="action" value="add">Add</button>
<button type="submit" name="action" value="remove">Remove</button>

… the value of "action" is removed from the submitted form. Is there any way around this, like resuming the initial submit or something like that? Or is there no option but making the buttons change the value of a hidden input before submitting the form, for example?

Answer 1

You gave the solution yourself

<input type="hidden" name="action" value="" />
<button type="button" class="action" value="add">Add</button>
<button type="button" class="action" value="remove">Remove</button>

$(function() {
  $('.action').on("click",function(e) {
    const parent = this.form;
    $("[name=action]").val(this.value);
    Swal.fire().then((result) => {
      if (result.value) {
        parent.submit();
      }
    })
  });
});