htmx
htmx copied to clipboard
Htmx do not respect a updated form action on a boosted form updated by javascript before form.requestSubmit()
When I try to use hx-boosted to submit a form to sever,
Expected: the form to use the updated action1 path post to server Actual: use the default empty path
I discover seems due to https://github.com/bigskysoftware/htmx/blob/master/src/htmx.js#L1426,
the action path is getted when page init (thus the action is ""
).
Then https://github.com/bigskysoftware/htmx/blob/master/src/htmx.js#L3208 will update the path to docuemnt current url.
My workaround is call htmx.process(form)
before form.requsetSubmit()
Is it an expected use case for calling htmx.process
in this case?
if yes, maybe consider adding documentation in hx-boosted?
Simplified Problematic Version: (I do not know why cannot reproduce in codepen)
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/htmx.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function(e) {
htmx.logAll()
document.getElementById('btnRequestSubmit').addEventListener('click',requestSubmit)
})
function requestSubmit() {
const form = document.querySelector('form')
form.action = 'action1'
form.requestSubmit()
}
</script>
<form action="" hx-boosted='true' method='POST'>
<button type="button" id="btnRequestSubmit">Button for requsetSubmit</button>
</form>```