bigskysoftware / htmx

</> htmx - high power tools for HTML
https://htmx.org
Other
37.64k stars 1.27k forks source link

Support for sending input values to websocket servers outside of forms #2127

Open Moses-Alero opened 9 months ago

Moses-Alero commented 9 months ago

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.

itepastra commented 9 months ago

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!

Moses-Alero commented 9 months ago

Thanks a lot.