Submitting multi inputs types in Phoenix LiveView

Sidi_Mohammed

Hello everybody,
Iam new to Phoenix Components, I have tried form inside LiveView and it was amazing, but I have an issue :
form is created by Phoenix.Component.to_form/2 which transform a changeset to a form and we can use <.input type = "text" field = {@form[:somefield]} to represent a form’s field and the user’s data will be found in handle_event("submit", %{"user" => data}, socket) after submitting the form, Okay that’s fine.
But how about other inputs types than <.input type = "text"> ?
For example if we want to implement a template where someone can Signup a new account :
he has some <.input type = "text">s like username, email, password and he has to choose from a “Radio Button” between Man and Woman and he has to choose a date of birth from “Scroll Lists”…
So how we can implement that ? and the most important how we can retrieve user’s entered data in handle_event("submit"....) ?
I have searched about and I couldn’t find docs or examples, so I will be thankful for your answers.

17 comments

/phoenix

0 2621 17

2023-04-03 02:29:19 UTC

Showing Posts 1 to 10

Show Best Posts
Show All (oldest first)
Show All (newest first)

codeanpeace

With the new core components like <.input ...> and <.modal>, they’re just functions that are defined and documented within your Phoenix app in lib/hello_web/components/core_components.ex .
https://github.com/phoenixframework/phoenix/blob/f8c0ad26ee031ee87a6e7307f6dc1f7722134dd5/installer/templates/phx_web/components/core_components.ex#L227-L264
So while the type attribute defaults to "text", it also accepts a whole bunch of other values including "radio" as well as "date".

  attr :type, :string,
    default: "text",
    values: ~w(checkbox color date datetime-local email file hidden month number password
               range radio search select tel text textarea time url week)

Post #1

Sidi_Mohammed

Thank you @codeanpeace,
Considering we have used no-text type for an <.input> for example “Multi Select List”, how we can retrieve user’s input in handle_event/3 after submitting ?

Post #2

jmnda

Hi @Sidi_Mohammed , kindly asking if you can elaborate more or provide more context on your question, perhaps even a simple example of what you are trying to archieve?

Post #3

Sidi_Mohammed

@jmnda I gave an example of Signing up

Post #4

jmnda

Just want to understand what you mean here:

Are you trying to implement a Multi Select input?

Post #5

Sidi_Mohammed

Exactly @jmnda, I want to implement a list which the user can select multi values, how we can implement that please ? and how we can retrieve the selected values in handle_event/3 when submitting the form ?

Post #6

Joep

Did you search for it on these forums?
https://forum.elixirforum.com/search?q=Multi%20select

Post #7

jmnda

Use can pass a multiple attribute to your input with options to select, for example:

<.input field={@form[:tags]} type="select" multiple options={[:item_1, :item_2, :item_3]} label="Tags />

As @Joep suggested, you can search on the forum, alternatively you can look at this guide, or checkout this library

Post #8

codeanpeace

Here’s how you can discover it for yourself!

# assuming your multi-select is within the existing user form
def handle_event("submit", %{"user" => data}, socket) do
  IO.inspect(data)
  # and optionally when running `iex -S mix phx.server`
  require IEx; IEx.pry
  ...
  {:noreply, socket}
end

# or more generally
def handle_event("submit", params, socket) do
  IO.inspect(params)
  ...
end

Post #9

Sidi_Mohammed

I sword I have thinked the same thing to show the data’s map and see what’s happening , Iam just waiting until turn on my computer,
thank you a lot again @codeanpeace