i am building a simple form to learn HTMX but I am unable to make htmx:afterRequest work properly.
<form autocomplete="off" id="wa-link-form"
hx-post="<?= $baseUrl ?>/api/create_link"
hx-trigger="submit"
hx-target="#result"
hx-swap="outerHTML"
hx-on="htmx:afterRequest: clearForm(); reissueCsrfToken();">
...
</form>
Here’s my JS function that I want to call:
<script>
function clearForm() {
document.getElementById('wa-link-form').reset(); // Reset all form fields
}
function reissueCsrfToken() {
fetch('whatsapp/api/get_csrf_token') // Endpoint that provides a new CSRF token
.then(response => response.json())
.then(data => {
document.getElementById('csrf_token').value = data.csrf_token; // Update the CSRF token value
})
.catch(error => console.error('Error fetching new CSRF token:', error));
}
</script>
Please somebody tell me what I am doing wrong?