Missing value of submit button when sending data with ws-send

[medihack]

I have a form with multiple submit buttons that I would like to submit to a WebSocket location using the ws extension of htmx. Unfortunately, the value of the button clicked is missing in the sent data object. Only the name of the button is added as HX-Trigger-Name. I would have also expected that the button name and value are added to the data array. How else should I find out which button in the form was clicked? And only that way a fallback without WebSockets is possible.

Example form:

<div hx-ext="ws" ws-connect="/my-ws-url">
  <form action="post" action="" ws-send>
      <button type="submit" name="vote" value="up">vote up!</button>
      <button type="submit" name="vote" value="down">vote down!</button>
  </form>
</div>

Also adding ws-send to the buttons does not help.

[medihack]

Alright, I investigated a bit further and looked in the source code of htmx. It seems that when hx-ext="ws" is set on a surrounding div the form is not properly initialized, the buttons are not tracked and therefore get not included into the data when sent.

The solution is to set the hx-ext="ws" on the form element itself:

<form action="post" action="" hx-ext="ws" ws-connect="/my-ws-url" ws-send>
    <button type="submit" name="vote" value="up">vote up!</button>
    <button type="submit" name="vote" value="down">vote down!</button>
</form>

The official documentation is very misleading here. I'll create an issue as the documentation should be updated, or the initialization should travel more deeply into the sub-elements.

[naveenrk5]

How did you handle the message received from the /my-ws-url, to display it in the UI? I tried similar using Elsyia and htmx and but not able to display the message on the browser but I'm receiving the message in the /my-ws-url

`<div>
  <form id = "chat" name="chatf" hx-ext="ws" ws-connect="/chatroom" hx-target="#chat_room" hx-swap="outerHTML" ws-send>
    <input name="chat_message" id="chat" />
    <button class="button">Send</button>
  </form>
</div>
<div id="chat_room">
    replace
</div>`