Submitting forms in LiveView without performing page reload

My first stab at LiveView is not quite going as expected. I am trying to adopt a bootstrap template in LiveView. My challenge is that my form is performing a POST request and failing because the POST URL does not exist. When I change the action it prints the variables onto the address bar after a call.

My intention is to create a login page with LiveView and subsequently implement the other forms in it. I could be missing something from my setup but it seems as if my handle_event callbacks are not fired.

I created the project with --live option and I am currently on the {:phoenix_live_view, "~> 0.13.1"}

:wave:

Submitting forms via liveview without page reload is done by setting phx-submit form attribute.

<form phx-submit="...">
...
</form>

But personally I wouldn’t use liveview forms for login, since they usually need to respond to post requests with cookie headers.

1 Like

I have that in there but for some reason it keeps submitting the whole form and reloading the page.

<div class="page-ath-wrap">
        <div class="page-ath-content">
            <div class="page-ath-header">
                <a href="./" class="page-ath-logo"><img src="<%= Routes.static_path(@socket, "/images/logo.png") %>" srcset="<%= Routes.static_path(@socket, "/images/logox2.png") %> 2x" alt="logo"></a>
            </div>
            <div class="page-ath-form">
              <h2 class="page-ath-heading">Sign in <small>with your <%= @app_name %> Account</small></h2>
              <form phx-submit="sign_in">
                   <div class="input-item">
                        <input id="username" type="text" placeholder="Username" name="username" class="input-bordered">
                    </div>
                    <div class="input-item">
                        <input id="password" type="password" placeholder="Password" name="password" class="input-bordered">
                    </div>
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <a href="#">Forgot password?</a>
                            <div class="gaps-2x"></div>
                        </div>
                    </div>
               <button class="btn btn-primary btn-block">Sign In</button>
              </form>
                <div class="gaps-10x"></div>
            </div>
            <div class="page-ath-footer">
                <ul class="footer-links">
                    <li><a href="#">Privacy Policy</a></li>
                    <li><a href="#">Terms</a></li>
                    <li>&copy; <%= @year %> <%= @app_name %>.</li>
                </ul>
            </div>
        </div>
        <div class="page-ath-gfx">
           <div class="w-100 d-flex justify-content-center">
               <div class="col-md-8 col-xl-5">
                 <img src="<%= Routes.static_path(@socket, "/images/ath-gfx.png") %> " alt="image">
               </div>
           </div>
        </div>
</div>

I am exploring this option to take out the login form and wire it outside of liveview and use liveview for what it excels at which would be the dashboard UX.

Login forms almost always need to do a real HTTP submit and not a phx-submit because the process of logging in needs to set a value on the cookie, and that can only be done via a real HTTP submit.

1 Like