Not able to send multiple events with JS.push in phx-submit

Phoenix Forum Questions / Help
, , , ,
1

I want to send multiple events to liveview on the form submittion. I am chaining two JS.push commands, but the server recieves only first_event.

    <.form :let={f} for={%{}} phx-submit={JS.push("first_event") |> JS.push("second_event")}>
      <button type="submit">Submit</button>
    </.form>

Event handlers:

  def handle_event("first_event", _params, socket) do
    dbg("Recieved first event")
    {:noreply, socket}
  end

  def handle_event("second_event", _params, socket) do
    dbg("Recieved second event")
    {:noreply, socket}
  end

Interesting thing is that if I click on the button which has phx-click, both events are send to the server.

<button phx-click={JS.push("first_event") |> JS.push("second_event")}>button</button>

Why does phx-submit behave differently?

2

If you put a call to IO.inspect between them you may see your issue.

EDIT: just to make it a little less vague, keep in mind that pipes aren’t just subsequent calls, it creates a pipeline where the result of the previous step is passed as the first parameter to the next step.

3

Just a theory off the top of my head, phx-submit might only send a single event by design because the form submission binding also disables then re-enables the submit button, form inputs, and loading css class around the submission event.

4

This is correct. LiveView prevents extra form submits while the first one is still in progress. That’s why the second push is ignored.