"TypeError:" in Form Submit Confirmation Controller

[Linuxmaker]

Hello everyone,

I'm trying to recreate this modal . I don't use a form now, I use a button.

<button type="button" data-controller="submit-confirm" data-action="submit-confirm#onSubmit" class="w-100 btn btn-sm btn-outline-danger" data-bs-trigger="hover" data-bs-toggle="popover" data-bs-placement="top" data-bs-title="Vorsicht! Löschen des Datensatzes!" data-bs-content="Hier wird der Datensatz Betriebshaftpflichtversicherung gelöscht!.">
  <a href="/betriebskosten/entfernen/7">Löschen</a>
</button>

The corresponding controller submit_confirm_controller.js looks like this:

import { Controller } from '@hotwired/stimulus';
import Swal from 'sweetalert2';

export default class extends Controller {
    onSubmit(event) {
        event.preventDefault();
        console.log(event);
        Swal.fire({
            title: 'Sind Sie sicher?',
            text: "Sie können dies nicht rückgängig machen!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Ja, löschen Sie es!',
            }).then((result) => {
            if (result.isConfirmed) {
                this.element.submit();
            }
        })
    }
}

This also works except for deleting the record. Here I get the message in the web browser console:
when I press the submit button of the modal.
Uncaught (in promise) TypeError: _this.element.submit is not a function
Can someone tell me how to fix this error? Or does this solution only work for forms?

Best regards
Andreas

[carsonbot]

Thank you for this issue.
There has not been a lot of activity here for a while. Has this been resolved?

[Kocal]

Hi, I edited your message in order to make code blocks more readable, please use ``` next time please 🙏🏻 .

Two things:

1. I don't think having a <a> inside a <button> element is a good idea
2. this.element refers to <button>, an HTMLButtonElement, which does not have a submit() method

However, you can access the current button's form through this.element.form and then submit it, see https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement/form.