mitkins

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

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! :tada:

Also Liked

egze

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

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

Where Next?

Popular in Questions Top

qwerescape
Is there a way to get the call stack or stack trace at any point in the code? Not from exceptions, but an expression that returns how the...
New
skosch
To my knowledge, put_in, Map.update etc. all have the one limitation of not automatically creating intermediate keys when needed (for exa...
New
mgjohns61585
Could someone help me? I’m making my first elixir program, number guessing game. I can’t figure out how to convert the user’s guess from ...
New
johnnyicon
Hi all, I’ve just started learning Elixir and Phoenix Framework, so please pardon my n00bness at this stage. I’m trying to use Postgres...
New
Fl4m3Ph03n1x
About me? ( if you have nothing better to do than reading about some random guy in the internet :stuck_out_tongue: ) Hello all, this is ...
New
nobody
How to bind a phoenix app to a specific ip address? could not find anything about that, nowhere, unfortunately, but for me this is quite...
New
LegitStack
I’m trying to make a websocket server in Phoenix or raw Elixir. I heard about gun, I think I could use cowboy, but since I’m not that sma...
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
script
If I have a string “1000 cfu/ml” . I want to remove the characters and / and space . So the string is like this "1000" What is the ...
New
WestKeys
Currently suffering from paralysis by [HTTP client] analysis. This is rather unusual in Elixirland as there tends to be consensus on the ...
New

Other popular topics Top

sorentwo
Hello! tl;dr Announcing Oban, an Ecto based job processing library with a focus on reliability and historical observability. After spen...
985 42920 311
New
siddhant3030
Hi, I have to write a raw query for one of my project. But till now I have used ecto queries and don’t have much experience writing raw ...
New
electic
Hi, I am new to Elixir. I am trying to use the DateTime component to insert a date into MySQL however the there seems to be no way to fo...
New
ovidiubadita
Hey all, I discovered Elixir and I love it. I always wanted to learn a functional programming and I intended to go for Haskell, but afte...
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
aesmail
Hello guys, I have finally made it. I created an admin interface for a framework. It’s been on my todo list for years and with the curre...
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
bsollish-terakeet
Credo is smart enough to check for (something like) this: assert length(the_list) == 0 with this response: Checking if an enum is empt...
New
ashish173
I am using Ecto timestamps with postgres, I can see the timestamps() use the :naive_dateime but for my use case I wanted to store the ti...
New
jononomo
For some reason my phoenix channels are working for me in my local dev environment, but as soon as I deploy via Docker, I get a 403 error...
New

We're in Beta

About us Mission Statement