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

Phoenix Forum Questions / Help
,
1

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?

2 Likes
2

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…

3

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

4

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

2 Likes
5

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?

1 Like
6

No problem!

4 Likes
7

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
8

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?

1 Like
9

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).

10

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.

11

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.

12

You can also use the name and value attribute for buttons and rely purely on browser behavior to get the value in your LiveView.

2 Likes
13

I’m fond of that solution, used it recently here:

14

that solution only works in a controller, but not in a live-view.

15

here’s my alpine-js workaround to it, in case someone can use it:

(in this case i needed a “test” button to pre-evaluate a form before really submitting it and closing the modal)

 <div
      x-data="{
        submitAndTest: function() {
          const field=this.getNextActionField();
          field.value='test';
          document.getElementById('editform').dispatchEvent(new CustomEvent('submit', { bubbles: true }));
          field.value='';
        },
        getNextActionField() {
          const form=this.$el.closest('form');
          const field=form.querySelector('#_next_action_field');
          if(field) {
            return field;
          } else {
              var input = document.createElement('input');
              input.type = 'hidden';
              input.id = '_next_action_field';
              input.name = 'action[name]';
              const newfield=form.appendChild(input);
              return newfield;
          }
        }
      }"
    >

      <.form
        :let={f}
        for={@form}
        as={:fdata}
        phx-change="validate"
        phx-submit="save"
        phx-target={@myself}
        id="editform"
      >

          <div>
            <a x-on:click.stop.prevent="submitAndTest" href="#" >
              Test Filter-Rules
            </a>
          </div>

then, in the live-component you can pattern match for the action parameter alongside your form-data:

  def handle_event("save", %{"action" => %{"name" => "test"}, "form" => form}, socket) do
16

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:

6 Likes
17

It should be mentioned that on older liveview versions this was not possible, the only way you could achieve this before (excluding the abominations where JS is involved) was to declare a a link with value and style it as a button.

18

Yes. That’s a fair point. This would have not helped 2019 me