Live View - 2 submit buttons - identify which one was pressed?

I’m thinking at this stage that I may be better off creating some client-side javascript to set a hidden field before the form is POSTed. I might have a look at the JS interop mechanism and see what’s possible there…

Does this thread help? It sounds like a similar situation.

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

If we aren’t passing more information to handle_event and it helps your case, I think we should! It is so common to include two buttons in a form so something like this should be simple to handle.

Would you mind opening an issue in the LiveView repo so we can discuss?

No problem!

https://github.com/phoenixframework/phoenix_live_view/issues/511

In case of anyone come across this topic. Here is my solution for this particular issue.
Form

<form>
   <! -- We don't need hidden_input here. -->
  <button type="submit" id="foo-btn" phx-hook="HandleSubmitForm" name="foo" phx-hook="SetButtonState">Save</button>
  <button type="submit" id="baz-btn" phx-hook="HandleSubmitForm" name="baz" phx-hook="SetButtonState">Save and Close</button>
</form>

Js logic with jquery

// Your phx-hook logic.
// Instead of common way of submitting form, we're handling form submission with ajax.
$(this.el).on('click', '#buttonID', function(evt) {
  evt.preventDefault()
  let targetButton = evt.target.getAttribute("name")
  let form = document.getElementById("yourFormID")
  const formData = new FormData(form)
  formData.append("button", targetButton) # pattern match on this on server side.

  $.ajax({
    url: "/broadcast", # Route for your controller.
    type: "PUT", # PUT or POST
    data: formData,
    processData: false,
    contentType: false,
    headers: {
      X_CSRF_TOKEN: yourCsrfToken
    }
  })
  .done((resp) => {
    # Do something with resp
  })
  .fail((err) => {
    # Do something with err
  })
});

Use a controller to handle ajax request.

# And then in your broadcast controller.
  def send(conn, params) do
   data = params # Handling data from the form.
    Phoenix.PubSub.broadcast( # Broadcast updates to LiveView
      YourApp.PubSub,
      broadcast_topic,
      {:update_content, %{data: data}}
    )

    send_resp(conn, 200, "ok") # Send some response or err
  end

# Dont forget to subscribe topic in your mounted LiveView
def mounted(_params, _session, socket) do
  Phoenix.PubSub.subscribe(YourApp.PubSub, broadcast_topic)
...

And finally handle_info/2

  def handle_info({:update_content, %{data: data}}, socket) do
    # Do something with updated data
    {:noreply, socket}
  end

Isn’t this kind of convoluted?

This issue can be solved purely on the client side with javascript, which you’re already doing. Instead of initiating an ajax call, why not simply set a hidden input on the form?

My first intuition here would be to use phx-click instead, and pull the form data out of the assigns manually (assuming you’re using live validation).

I tried this but the validation didn’t work, because, if the form was not submitted, the class “phx-no-feedback” is set to the fields, that had no focus yet. So the changeset errors are not shown.

Here is a formulation that relies on

• SubmitEvent.submitter docs
• The useCapture option of addEventListener docs (maybe ensuring the behavior occurs before the actual submit occurs?)

<.form
  :let={f}
  for={:form}
  phx-target={@myself}
  phx-hook="MultiSubmitForm"
  id="user-form"
>
  <%= submit "Alternate Save", "phx-submit": "alternate_save_user" %>
  <%= submit "Save", "phx-submit": "save_user" %>
</.form>

Hooks.MultiSubmitForm = {
  mounted() {
    this.el.addEventListener("submit", (event) => {
      let phxEvent = event.submitter.getAttribute("phx-submit");
      event.target.setAttribute("phx-submit", phxEvent);
    }, true);
  }
}

It worked locally for me in a really simple example, but I’m both new to Elixir and Phoenix and not intimately familiar with browser behavior, so it might be inaccurate.