How do I handle submitting a form?

Phoenix Forum Questions / Help
, ,
1 
  <form action="?">
    <input value="" />
  </form>

I just want to make an api call based on the input value.

2

Hey,
I’m no expert, but the other day I set up a basic LiveView form that counts the characters as you type.

Here’s the code for the LiveView form:
LiveView form

You also have to update the controller. I hope this helps!

3

Hello and welcome,

It depends where You want to make your api call… it could be on the server, or on the client.

On the server, You will need a route with a post action, like a create action of a controller, make the api call and return the result.

On the client, You could use onclick event, with a JS function that does the api call (usually with fetch) and update the DOM when the result comes back.

5

Thanks for sharing your code! The only thing that didn’t work for me is:
<%= @output %>
which is weird because this did:
<%= Map.get(assigns, :output) %>
and I thought the two were synonymous:

https://hexdocs.pm/phoenix/templates.html

The way we pass data into a template is by the assigns map, and the way we get the values out of the assigns map is by referencing the keys with a preceding @ . @ is actually a macro that translates @key to Map.get(assigns, :key) .

This was the error:

** (exit) an exception was raised:
    ** (ArgumentError) assign @output not available in eex template.

Please make sure all proper assigns have been set. If this
is a child template, ensure assigns are given explicitly by
the parent template as they are not automatically forwarded.

It was also a leex template, not eex. I wonder if it’s a bug?

6

They are. Are you doing any render calls within the template? Assigns are not implicitly passed from parent template to child template. You’ll need to show more code for us to diagnose.

7

Tech. it’s more like @output matches Map.fetch!(assigns, :output), because it raises if the key is not available.