Getting "no route found for POST" in a liveView form

Can we see the event handler for add_match_result? Are you sure it’s not being called?

Generally, if a POST request is being sent, Liveview has failed somehow. Have you checked your js console in-browser as well?

Oh sorry, that code snippet was wrong (there was a leftover from some other try). that is actually my render/1 function. it’s the same as above, but with the right phx-submit string.

  @impl true
  def render(assigns) do
    ~H"""
    <h1>Create a New Room</h1>

    <.form :let={f} for={@changeset} phx-change="validate" phx-submit="save">
      <.input field={{f, :title}} name="title" type="text" label="title" value={nil} />
      <.input field={{f, :slug}} name="slug" type="text" label="slug" value={nil} />
      <.button phx-disable-with="Saving...">Save</.button>
    </.form>
    """
  end

my event handler is currently only a function which prints me a hint that it has been called:

  @impl true
  def handle_event(_event, _params, socket) do
    IO.puts("handle_event()")
    {:noreply, socket}
  end

well.. and I don’t see that hint in the terminal…

oh yea and the javascript console in my browser also says not very much helpful things:

POST http://localhost:4000/room/new 404 (Not Found)

I strongly advise you to bail on that tutorial and try to find something a little newer. LiveView changes fast (less so as time goes on) and old content is likely to lead you down blind alleys. Here a couple good resources I found helpful when I was starting:

https://github.com/dwyl/phoenix-liveview-counter-tutorial

Also the GitHub account from the second link has a couple other good repos to learn LiveView concepts. Some of their implementations are a bit off (e.g. their Presence implementation was kinda half-baked IMO) but at least the code will compile.

Now to justify my initial position with some aimless ranting (I’d say I’m in the ‘advanced beginner’ skill level for Phoenix/LiveView). Yes, the code you posted should not result in any POST requests. If you look at the rendered HTML in your DevTools, you will probably find that the form has method="POST" in it (not sure why or how) because I believe that by default, a basic form should render a GET request. So that’s all weird.

If you were to create a POST endpoint in your router, it would look like this:

post "/create", YourController, :create

Of course, you didn’t, and since you used phx-submit in your <.form> component, that should mean that no POST request should be emitted at all. The Phoenix LiveView JS should intercept the form’s submit event and pass the event data to your Elixir code through the websocket instead of doing an HTTP POST request. But it’s not. Maybe try using the <.simple_form> component that’s part of the newer Phoenix function components? That’s the only thing I can think of off the top of my head. Perhaps the older <.form> Phoenix.HTML component may not accept the phx-submit attribute… just a guess. Check the HTML in your browser to see if the phx-submit attribute actually shows up in your <form> element. That would be my suspicion.

But yeah, since the browser is doing a POST request, I’m 99% sure that means that it’s not doing the websocket request, which is why you’re not seeing anything in the Elixir terminal.

TLDR; I think the <form> element in your HTML (in the browser) doesn’t actually have the phx-submit attribute and it may be because <.form> isn’t passing the attribute through. Either way, I strongly recommend finding a newer tutorial to work with.

Thanke you for your answer. Your are right, an old article like that is not a good starting point for liveView. In general I’m working with the book from Tate and DeBenedetto. I will definitely check out the repositories you mentioned. But this “Build a Video Chat App”-article is very interesting for me right now since it covers a lot I want to learn about (i.e. WebRTC). You also nailed it with your assumption the html on my browser has the method set to “post”. But it does have the phx-submit attribute…

hm… I will try it with the <.simple_form> next. But for my feeling I’m trying to do a very basic thing, right? having a form and want to handle the event for the button-clicking…

Here’s a super basic form that should help to do some basic sanity testing. I think it should work:

defmodule LittlechatWeb.Room.NewLive do
  use LittlechatWeb, :live_view

  def mount(_params, _session, socket) do
    {:ok, assign(socket, form: to_form(%{}))}
  end

  def render(assigns) do
    ~H"""
    <.simple_form id="your-form" for={@form} phx-submit="submit">
      <.input field={@form[:name]} type="text" label="Your name" required />

      <.button type="submit">Submit</.button>
    </.simple_form>
    """
  end

  def handle_event("submit", params, socket) do
    IO.inspect(params)
    {:noreply, socket}
  end
end

If you need some more examples to work with, try running a Phoenix generator (do a git commit first or create a new project, it puts a lot of files in a lot of places):

mix phx.gen.live YourContext YourModel your_context name:string some_other_value:string user_id:references:users

This is a good way to get up-to-date “canonical” implentations of LiveView stuff.

Any solution guys?
My forms was working just fine until I added some schemaless changeset?
That was enought for me to start seeing this same very issue. phx-validate is not being triggered and phx-submit is calling post http method.
Where do i go from here guys?

I found the issue. I have soime javascript in my app.js which were messing up with my DOM. So guys, look at your javascript and do some testing. desable some and see what happen. hope this helps

I also encountered this problem, this problem occurs because of the liveview client (app.js) is not returned to the browser. solved it by adding pipe_through. as follows.

  pipeline :browser do
    plug :accepts, ["html"]
    plug :fetch_session
    plug :fetch_live_flash
    plug :put_root_layout, html: {YourAppWeb.Layouts, :root}
    plug :protect_from_forgery
    plug :put_secure_browser_headers
    plug :fetch_current_user
  end

  scope "/room" do
   pipe_through [:browser]
    live "/new", LittlechatWeb.Room.NewLive, :new
    live "/:slug", LittlechatWeb.Room.ShowLive, :show
  end