mitkins
Live View - 2 submit buttons - identify which one was pressed?
I’m currently re-writing my form to create/edit Log entries with Phoenix Live View. I have an unorthodox UI - it has 2 submit buttons. 1 for “Work” and one for “Break” - offering the user the choice, but allowing the user to submit the form at the same time. So at the time of submitting the form - I need to know which button the user pressed.
In a traditional POST I use the name of the button - in my template I have the following:
<%= submit "Work", name: "work" %>
<%= submit "Break", name: "break" %>
If the user clicks a button, either work or break would exist in the list of params.
In a Live View, I don’t have this technique at my disposal. handle_event does not include the name of the submit button that was pressed.
I tried adding a phx-value-work attribute (which seems like an awesome way to solve this), but that only works with phx-click.
Does anybody have any suggestions?
Marked As Solved
mitkins
Gosh, it’s been a while! The following article was in DockYard’s newsletter today:
Please read the article, but in my case this:
<.form for={@form} phx-submit="save">
...
<button name="save" value="work">Work</button>
<button name="save" value="break">Break</button>
</.form>
Would work with this:
def handle_event("save", %{"save" => save_type}, socket) do
# `save_type` will be either "work" or "break"!
{:noreply, socket}
end
Much simpler! ![]()
Also Liked
mitkins
egze
You can also use the name and value attribute for buttons and rely purely on browser behavior to get the value in your LiveView.
mitkins
It does. Looks like I do need to set a hidden field using javascript before phx-submit event is fired.
Though, I think I might start by adding a phx-click first:
<%= submit "Work", name: "work", "phx-click": :set_work %>
<%= submit "Break", name: "break", "phx-click": :set_break %>
In my code I have something similar to this;
def handle_event("set_work", _params, socket), do: { :noreply, assign( socket, :work, true) }
def handle_event("set_break", _params, socket), do: { :noreply, assign( socket, :work, false) }
def handle_event("save", params, socket) do
# Do database operation here
end
I’m assuming this results in 2 round trips (phx-click followed by phx-submit), but the code is easier to read. I might do this for now until I’ve fleshed out my form
Popular in Questions
Other popular topics
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








