Trying to call an Alpine function in HTMX #4069
-
I have a form being submitted via a button: <form
method="post"
class=""
x-data="{
deliveryAddressConfirmed: $persist(false).as('deliveryAddressConfirmed'),
resetDelivery() {
this.deliveryAddressConfirmed = false;
localStorage.setItem('deliveryAddress', '');
localStorage.setItem('deliveryAddressName', '');
localStorage.setItem('deliveryAddressPostalCode', '');
localStorage.setItem('deliveryAddressCity', '');
localStorage.setItem('deliveryAddressCountry', '');
localStorage.setItem('selectedAddress', '');
localStorage.removeItem('displayedAddress', '');
},
}"
>
// Some inputs
<button
class=""
type="submit"
id="checkout_confirm_button"
hx-post="{% url 'shop:checkout-page' %}"
hx-params="delivery_address_name,delivery_address,delivery_address_postal_code,delivery_address_city,delivery_address_country"
hx-swap="none"
data-loading-class="pointer-events-none cursor-wait opacity-80"
data-loading-aria-busy
>
Submit
</button>
</form> I do the input validation using AlpineJS. The issue is that I need to call the Alpine function I've added the following code to the form tag, then to the button and I only get hx-on::after-request = "resetDelivery()"
@submit="resetDelivery()"
onsubmit="resetDelivery()" |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
The event is dispatch on the dom node, so Alpine can listen to it (might need to double check that is the name of the event though) |
Beta Was this translation helpful? Give feedback.
The event is dispatch on the dom node, so Alpine can listen to it (might need to double check that is the name of the event though)