How can I make the website remember last shown form?

How can I make the website remember last shown form?

I have two forms inside one div:

I have two forms inside one div:

  • Login form
  • Register form

Register form is hidden while login form is shown as default when you load the page. Im using js script to animate between those two forms by clicking anchor tag.

This causes problems for example while trying to register and you don't go through validation process correctly.

Hypothetical situation:

You've filled all the inputs, click submit button and it turns out that username you've provided is too short. The page will reload and it will show the default form again which is login form. You then again need to click "Register" a tag in order to switch between forms and then you see the error with validation.

I've been trying to read up about ways of doing that for days but seems like I can't specify my problem well enough in a short phrase. Can you guys explain what kind of method should I use and explain how to use it?

HTML:

<div class="login-page">
        <div class="form">
            <form class="register-form" method="POST">
                <input type="text" name="nick" placeholder="username"/>
                <input type="password" name="password1" placeholder="password"/>
                <input type="password" name="repassword" placeholder="repeat password"/>
                <input type="text" name="email" placeholder="e-mail adress"/>
                <button>Create</button>
                <p class="message">Already have an account? <a href="#">Log in!</a></p>
            </form>
            <form class="login-form" method="POST" action="login.php">
                <input type="text" name="login" placeholder="username"/>
                    <input type="password" name="password" placeholder="password"/>
                    <button>log in</button>
                    <p class="message">Don't have an account yet? <a id="createacc" href="#">Sign up!</a></p>
            </form>

JS:

$('.message a').click(function(){
$('form').animate({height: "toggle", opacity: "toggle"}, "slow"});

I want the website to remember which form you were filling before the page reloaded instead of always showing the default one (which is login form).

Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

Brave, Chrome, Firefox, Opera or Edge: Which is Better and Faster?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Render HTML with Vanilla JavaScript and lit-html

Sometimes you need to render HTML elements on a web page. And like Goldilocks' search for "just right", you have to try a few techniques before you find the right one. Using a framework may be too hard. Using pure HTML and the DOM API may be too soft. What you need is something in the middle that is just right. Is lit-html "just right"? Let's find out.

How to Retrieve full Profile of LinkedIn User using Javascript

I am trying to retrieve the full profile (especially job history and educational qualifications) of a linkedin user via the Javascript (Fetch LinkedIn Data Using JavaScript)

How to Create an Animated Navbar with Html, CSS and JavaScript

In this Html, CSS and JavaScript tutorial you will build an animated navbar with Html, CSS and JavaScript. Have you every wanted to create an awesome animated navbar with JavaScript? We will be looking at making a navbar with Html and CSS and then using the intersection observer in JavaScript to help us create this effect.