htmx icon indicating copy to clipboard operation
htmx copied to clipboard

Websocket extension not sending form data in message to server

Open nathan-hello opened this issue 2 years ago • 0 comments

I have this form

<script src="https://unpkg.com/[email protected]" integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC" crossorigin="anonymous"></script>
<script src="https://unpkg.com/htmx.org/dist/ext/ws.js"></script>
<script> htmx.logAll() </script>
<div id="messages" class="h-96 w-48 bg-gray-200 mx-auto "></div>
<div ws-connect="/ws-chat" hx-ext="ws">
	<form id="form" hx-boost="true" ws-send >
		<input ws-send class="mx-auto" id="msg-input" type="text" placeholder="Write a message..."/>
		<button ws-send type="submit">Send</button>
	</form>
</div>

I have ws-send slapped on everything, because I imagine with form data that's relevant. There isn't a difference between pressing enter in the text box and pressing the button of type="submit". This also happens regardless of the hx-boost

When I type something into the input and press Send, or press Enter in the text box, I get the full four messages: wsBeforeSend, wsAfterSend, wsBeforeMessage, wsAfterMessage.

Inside of wsBeforeSend and wsAfterSend, the "message" object is like so: message: '{"HEADERS":{"HX-Request":"true","HX-Trigger":null,"HX-Trigger-Name":null,"HX-Target":null,"HX-Current-URL":"http://localhost:3000/chat"}}'. In my server logs, I see exactly that.

In the wsBeforeMessage and wsAfterMessage I get back an object that has my test message.

So it's not adding any of the form data! I see #1337 but I tried both of the solutions they provided as a stop-gap, and it doesn't work, and the issue was closed with a bugfix pr.

Any help is appreciated.

nathan-hello avatar Feb 10 '24 14:02 nathan-hello