View source for Forms and Event Handlers in Elixir Phoenix Liveview

{{In_progress}}

{{Phoenix-Installation-Required}}


To begin, [[How_to_Create_a_Basic_Elixir_Phoenix_LiveView_Application|create a new basic working LiveView Page]].

You can follow the tutorial [[How_to_Create_a_Basic_Elixir_Phoenix_LiveView_Application|here]] and then come back to this page if you need to.

<source>
defmodule AppWeb.PageLive do
   use AppWeb, :live_view  
   def mount(_params, _session, socket)  do
	 {:ok, socket}  
   end

   def render(assigns) do
     ~H"""
        Hello World! YAY
	 """ 
   end

end

</source>


Change the code above to contain a form and an event_handler. The code below reflects how this should look.

<source>
  use AppWeb, :live_view

  def mount(_params, _session, socket) do
    {:ok, socket}
  end

  def handle_event("send", params, socket) do
    IO.inspect(params)

    {:noreply, socket}
  end

  def render(assigns) do
    ~H"""
    <div>
      <h1>connection Send</h1>

      <form phx-submit="send">
        <input type="text" name="text-field" />
        <input type="text" name="another-filed" />
        <button type="submit">Send</button>
      </form>
    </div>
    """
  end

</source>


The handle_event() function listens and responds to an event defined as its first argument. In this case, it is named "send". 

<source>
  def handle_event("send", params, socket) do   # "send" is the name of the event listened for
    IO.inspect(params)

    {:noreply, socket}
  end

</source>

When the form below is submitted, it invoke the handle_event function above that has the same string associated with it. In this case it's "send". 

<source>
phx-submit="send"
</source>

It is placed here: 

<source>
      <form phx-submit="send">
        <input type="text" name="text-field" />
        <input type="text" name="another-filed" />
        <button type="submit">Send</button>
      </form>
</source>

When you submit the form, the contents of handle_event run. In this case, IO.inspect is used to view params. Params contain the form field contents as a map data structure.

The keys of the map are the name attributes of the HTML input fields and the content of each field is assigned to its respective key.

<source>
%{"another-filed" => "the data", "text-field" => "more data"}
</source>