htmx icon indicating copy to clipboard operation
htmx copied to clipboard

Support for sending input values to websocket servers outside of forms

Open Moses-Alero opened this issue 2 years ago • 2 comments

Currently, sending a WebSocket message (or any input value at all as far as I know) to a server requires the input to be inside a form as described below

<div hx-ext="ws" ws-connect="/chatroom">
    <div id="notifications"></div>
    <div id="chat_room">
        ...
    </div>
<!--input must be inside a form before the value is sent to the server-->
    <form id="form" ws-send>
        <input name="chat_message">
    </form>
</div>

Suggested change/improvement

 <div id="chat_input" ws-send hx-trigger="click from:#snd-btn"> 
     <input  type="text" name="message-text" placeholder="Type a message...">
     <button id="snd-btn">Send</button>
 </div>

Here Input values entered from any suitable container other than forms can be sent to the server.

Moses-Alero avatar Dec 23 '23 02:12 Moses-Alero

Maybe you can use hx-include like

 <div id="chat_input" > 
     <input  type="text" name="message-text" placeholder="Type a message...">
     <button ws-send hx-include="[name='message-text']">Send</button>
 </div>

this would include the value of the input with the request, I hope this solves your problem.

Happy holidays!

itepastra avatar Dec 25 '23 19:12 itepastra

Thanks a lot.

Moses-Alero avatar Dec 30 '23 08:12 Moses-Alero