Terbium-135
Phoenix form: How to add 'selected' to an input field of type select
Probably I’m overlooking something very obvious…
How do I add selected to the option field depending on the value of type on rendering the form?
Was looking at the core_components.ex file for some further information but no luck
<.input field={{f, :type}} type="select">
<:option value="meat"><%= gettext("Meat") %></:option>
<:option value="vegan"><%= gettext("Vegan") %></:option>
<:option value="vegetarian"><%= gettext("Vegetarian") %></:option>
</.input>
So lets say with type=“vegan” the HTML supposed to be:
<:option value="vegan" selected><%= gettext("Vegan") %></:option>
Marked As Solved
Terbium-135
Thanks for the head ups.
After replacing the old core_components.ex file with the latest one and after changing the form syntax as well all is working as expected!
<.input
field={f[:type]}
type="select"
options={[
{gettext("Salad"), "salad"},
{gettext("Dessert"), "dessert"},
[...]
{gettext("Vegan"), "vegan"},
{gettext("Vegetarian"), "vegetarian"},
{gettext("Info"), "info"},
]}
>
</.input>
Also Liked
milangupta
This may help you understand the behavior and some of the tricks .. am using the new syntax and latest phoenix version ..
<.input field={f[:name]} type="text" label="Name" />
<.input field={f[:name]} type="select" value={"Vegetarian"}
options={[{"meat", "Meat"}, {"vegan", "Vegan"}, {"vegetarian", "Vegetarian"}]}>
</.input>
cmo
You can put selected on the option but you shouldn’t need to.
If you “prefill” your form with a value in type you’ll see that value will be selected.
Also, that’s old syntax for field, what version are you using?
Popular in Questions
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Enabling companies to succeed by building software people love.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #performance
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking for Elixir devs who love to ship. Start your free account.
Practical resources that improve the lives of professional developers.
Develop your skills with books, videos, and courses.
Enabling companies to succeed by building software people love.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"