athsche

athsche

Simple way to get value of input field?

I am very new to the Phoenix Framework. All I am trying to do is to get the input text from an html input, which is supposed to be a message in a chat. Then I want to add that text to the chat history below.

I don’t need changesets, databases and I think I don’t even need forms (?). All I want to do is get the input and concatenate it to an ever longer chat log. :smiley:

My code so far:

defmodule ChatWeb.ChatLive do 
    use ChatWeb, :live_view
    
        def mount(params, session, socket) do
            {:ok, assign(socket, :text_value, "")}
        end
        
        def render(assigns) do
        ~H"""
            <h1>Chat</h1>
            <label>Your Text:<input id="msg" type="text" /></label>
            <button phx-click="send-msg">Send</button>
            <div id="chat">
                Chat history: <%= @text_value %>
            </div>
            
        """
        end
        
        def handle_event("send-msg", _, socket) do
            msg = "what do I do here?"
            {:noreply, assign(socket, :text_value, msg)}
        end
        
end

Thanks so much in advance!

Most Liked

benwilson512

benwilson512

Author of Craft GraphQL APIs in Elixir with Absinthe

Hi @athsche welcome! To be valid HTML, inputs have to be contained inside a form. You also need to make sure to give your input a name. Finally, you want to use a phx-submit on the form because you’re trying to connect the clicking of the button to the submission of the text input.

Here is an example that should work (although I haven’t had a chance to run it myself)

        def render(assigns) do
        ~H"""
            <h1>Chat</h1>
            <form phx-submit="submit">
            <label>Your Text:<input id="msg" type="text" name="text_value" /></label>
            <button>Send</button>
            </form>
            <div id="chat">
                Chat history: <%= @text_value %>
            </div>
            
        """
        end
        
        def handle_event("send-msg", %{"text_value" => msg}, socket) do
            {:noreply, assign(socket, :text_value, msg)}
        end

Last Post!

athsche

athsche

Thanks very much!
Unfortunately the message is not added to the chat history, i.e. text_value variable. I will try to look into that. But already this has helped my general understanding of the framework a lot.

Where Next?

Popular in Questions Top

RisingFromAshes
I’ve read in another post that it may be possible with a router helper - but I couldn’t find an appropriate one, and tbh, I’m still just ...
New
minhajuddin
I have seen a lot of code which picks the first element from a list using Enum.at(0) instead of List.first. Is there a reason why people ...
New
Brian
What is the proper way to load a module from a file in to IEX? In the python world, doing something like this pretty standard: from ....
New
gshaw
What is the idiomatic way of matching for not nil in Elixir? E.g., First way: defp halt_if_not_signed_in(conn, signed_in_account) when...
New
belgoros
I’m not a pro in using Regex and can’t figure out why the following behaviour happens, especially if we take into account the difference ...
New
stefanluptak
Hello everybody, usually, I use a 29" ultra-wide monitor for VSCode which can easily accomodate explorer (files panel) + file with code ...
New
freewebwithme
Using vs code and installed ElixirLS: support and debugger. And I got an error popped up on start up says Failed to run ‘elixir’ comma...
New

Other popular topics Top

minhajuddin
I have seen a lot of code which picks the first element from a list using Enum.at(0) instead of List.first. Is there a reason why people ...
New
New
hariharasudhan94
I would like to know what is the best IDE for elixir development?
New
lanycrost
Hi everyone! I need implement if…else if…else condition from my elixir code, and anymore of this control flow structures not work proper...
New
AngeloChecked
What learn first? Rust or Elixir Hi Elixir community! I’m here because i want learn a new language. I’m a junior developer and mainly i ...
New
JorisKok
I have a server on AWS, and was running a load test using artillery. When looking at the Phoenix dashboard I see the Ports going to 100% ...
New

We're in Beta

About us Mission Statement