htmx icon indicating copy to clipboard operation
htmx copied to clipboard

Htmx do not respect a updated form action on a boosted form updated by javascript before form.requestSubmit()

Open mic4126 opened this issue 1 year ago • 0 comments

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>```

mic4126 avatar Feb 14 '24 04:02 mic4126