webpack-encore
webpack-encore copied to clipboard
"TypeError:" in Form Submit Confirmation Controller
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
Thank you for this issue. There has not been a lot of activity here for a while. Has this been resolved?
Hi, I edited your message in order to make code blocks more readable, please use ``` next time please 🙏🏻 .
Two things:
- I don't think having a
<a>inside a<button>element is a good idea this.elementrefers to<button>, anHTMLButtonElement, which does not have asubmit()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.