htmx icon indicating copy to clipboard operation
htmx copied to clipboard

hx-boost not working when submitting form programmatically

Open oliverhanappi opened this issue 2 years ago • 0 comments

I expected that programmatically submitting a form using JavaScript will trigger the hx-boost functionality, however it does not.

<form action="" method="get" hx-boost="true">
  Value: <input type="text" name="value" value="Test 1">
  <button type="submit" id="submit-button">Regular Submit (working)</button>
  <button type="button" onclick="this.form.submit()">form.submit() (not working)</button>
  <button type="button" onclick="this.form.requestSubmit()">form.requestSubmit() (working)</button>
  <button type="button" onclick="document.getElementById('submit-button').click()">Submit by Click (working)</button>
</form>

According to MDN the HTMLFormElement.submit() function does not raise the submit event, which is probably the root cause.

I do not know if this can be workarounded, but maybe the documention could be at least adopted to include an advice to use .requestSubmit() instead.

oliverhanappi avatar Jul 18 '22 12:07 oliverhanappi