tme_317

tme_317

No problem at all. There may be another way to do it without hiding fields but I’m not sure since we want every field param sent to handle_event("validate"... on each keystroke (or after x milliseconds or onBlur if you set the debounce) so you can feed them all to the changeset. Also you want every field sent to your “save” event.

In order to figure out how it all worked I had to use IO.inspect() a lot to study the %Changeset{} struct and %Form{} struct and how they change in response to events calling the related functions in the modules.

Also, I was looking at your Order module and not sure if you want to persist this as a DB table but you may want to use Ecto.Schema here instead of relying on schemaless changesets since right now it validates but doesn’t persist. A good pattern for LV forms can be found in the official examples here: LV Form Examples where in the handle_event("save"... you simply call the context function to persist (which validates it again) then pattern match on the result. If it’s {:ok, user} then it worked and you redirect with flash but if {:error, changeset} is returned then you can display the errors.

Hope this helps!

0
Post #11
f0rest8

f0rest8

I was able to follow the similar multi-step form guide with success after changing the <%= if @current_step == 1 do %> <% end %> lines in my new.html.leex template to:

# Using Tailwind CSS
<div class="<%= unless @current_step == 1, do: "hidden" %>">
  # form fields for step 1 here
</div>

<div class="<%= unless @current_step == 2, do: "hidden" %>">
  # form fields for step 2 here
</div>

<div class="<%= unless @current_step == 3, do: "hidden" %>">
  # form fields for step 3 here
</div>

This then allows the form inputs to not be reset when the Live View switches between steps.

I also applied IO.inspect to verify that my changeset wasn’t removing my previous inputs and it works!

:heart:

1
Post #12
ehayun

ehayun

I Think that the problem is using

<%= form_for ... %>
<%= if step == 1 %>

Explain: When you are using if and it is not true you don’t have the fields on your html page

you have to use it like this

<%= form_for ... %>
<div class='<%= if @step == 1, do: "hidden" %>'>
....
</div>
<div class='<%= if @step == 2, do: "hidden" %>'>
....
</div>

<% end %>

by doing that the HTML file will contains all the fields but it will show only on the exact step

0
Post #13
DragosMocrii

DragosMocrii

Maybe don’t use an <input type="submit"/> on the continue button? <button/> should work fine. Or if you do want to use the <input type="submit"/> you should be able to pattern match on the value. You can also have <button type="submit" value="continue">Continue</button> and <button type="submit" value="submit">Submit</button>

1
Post #15
f0rest8

f0rest8

Yup, turns out needed to explicitly set type="button" on my <button></button> fields. This then allows me to go back to using phx-click.

I shared Medium post on it, here’s the friend link.

Thank you! :blush::heart:

0
Post #16
DragosMocrii

DragosMocrii

Glad it helped.

I recommend that you don’t delete your post, because futures visitors will not understand what I meant in my previous comment, even if they are facing the same issue as you did. Better make a note in the comment to mention the other approach you took.

1
Post #17
f0rest8

f0rest8

:blush::+1: I’ll try to undelete the post when the action wait period is over.

The Medium post gives more detail on why you need to set the type="button".

0
Post #18
— All posts loaded —