Form submission inside child liveview

Questions / Help
, ,
1

Hello everyone

I had a question to which I cant understand how to implement it.

I have a parent live view which renders multiple child liveviews on a button click. Each child liveview has a form with a seperate submit button. I can render the child liveviews at will on the button click action.

Now the problem is that whenever I try to submit the form in the child template, it calls the appropriate handle_event in the the child liveview but the params are empty. I tried setting up phx_submit in the place where i am declaring the form along but it didnt work.

I am attaching my code below. Only the form for the child template.
P.S. I am giving an id to every child template that is rendered using the live_render function.


<%= f = form_for :details, "#"%>

    <label class="form-control-label" for="title">Title</label><br>
    <%= text_input f, :title, [class: "form-control"] %>
    <%= error_tag f, :title %>
    <br>

    <label class="form-control-label" for="name">Name</label><br>
    <%= text_input f, :name, [class: "form-control"] %>
    <%= error_tag f, :name %>
    <br>

    <label class="form-control-label">Telephone number</label><br>
    <%= text_input f, :telephone, [class: "form-control"] %>
    <%= error_tag f, :telephone %>
    <br>

    <label class="form-control-label">Text caption</label><br>
    <%= textarea f, :text_caption, [class: "form-control"] %>
    <%= error_tag f, :text_caption %>
    <br>

    <label class="form-control-label">Banner</label><br>
    <%= text_input f, :banner, [class: "form-control"] %>
    <%= error_tag f, :banner %>
    <br>

    <label class="form-control-label pb-05" for="startTime">Start Time</label><br>
    <%= time_input f, :start_time, [class: "form-control"] %>
    <%= error_tag f, :start_time %>
    <br>
                    
    <div class="add-event-button add-event-button-inter" phx-click="add_new_telephone">
    <div class="add-event-button-text" ><%= submit "Add", class: "btn p-0"%></div>
2

Hello,

You should read Form bindings — Phoenix LiveView v0.20.2

You bind an element to send a message when it’s clicked. Instead you want to send a form to your live view. You have to use phx_submit: add_new_telephone in your form params and just set a submit button in your form.


<%= f = form_for :details, "#", [phx_submit:  "add_new_telephone"] %>
...

<%= submit "Add", class: "btn p-0"%>
</form>

Also when you set a form to a variable like you do, don’t forget to close the form :wink:

3

yeah learned that the hard way. I just moved around my form_for declaration and closed it properly and it worked.

1 Like