Submitting forms in LiveView without performing page reload

Phoenix Forum Questions / Help
,
1

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"}

2

: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
3

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>
4

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.

5

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.

2 Likes