如何使网站记住上次显示的表格？

Question

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).

EDIT : In case anyone wondering. Yes, I did create similiar post about this yesterday but I realised that I didn't explain this well enough. Hope this goes through well.

Answer 1

You could make use of sessionStorage , a similar mechanism to cookies that persist only for the current session. When switching the visibility of your forms, set accordingly which one is also shown:

window.sessionStorage.setItem('lastOpenedForm', 'register');

And once the page loads again, fetch the value from there and display that form:

window.sessionStorage.getItem('lastOpenedForm');

Adapted code in snippet below:

 var lastOpenedForm = window.sessionStorage.getItem("lastOpenedForm"); // By default show login form; check if we should show register and toggle visibilities if (lastOpenedForm === "register-form") { console.log('last opened form was register form'); $(".form form").toggleClass("active-form"); $(".login-page").toggleClass("bigger"); } $(".message a").click(function() { $(".form form").toggleClass("active-form"); var activeForm = $('.active-form').eq(0).attr('id'); window.sessionStorage.setItem('lastOpenedForm', activeForm); console.log('last active form is ' + activeForm); $(".login-page").toggleClass("bigger"); }); // $("#createacc").click(function() { // window.sessionStorage.setItem("lastOpenedForm", "register-form"); // }); 

 .login-page { width: 600px; height: 290px; background: #333333; border-radius: 50px; margin-left: auto; margin-right: auto; margin-top: 10px; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5), 0 10px 10px 0 rgba(0, 0, 0, 0.24); transition: all 1s; } .login-page.bigger { height: 420px; } .form { position: relative; max-width: 360px; margin: auto; padding: 45px; text-align: center; } .form input { font-family: "Roboto", sans-serif; outline: 0; background: #f2f2f2; width: 100%; border: 0; margin: 0 0 15px; padding: 15px; box-sizing: border-box; font-size: 14px; border-radius: 5px; } .form button { font-family: "Roboto", sans-serif; text-transform: uppercase; outline: 0; background: #666666; width: 100%; border: 0; padding: 15px; color: #FFFFFF; font-size: 14px; cursor: pointer; border-radius: 5px; } .form button:hover, .form button:active, .form button:focus { background: #808080; } .form .message { margin: 15px 0 0; color: white; font-size: 16px; } .form .message a { color: #1a8cff; text-decoration: none; } .form form { /* display: none; */ visibility: hidden; opacity: 0; height: 0; transition: 0.5s easy-in-out all; } .form .active-form { visibility: visible; opacity: 1; height: auto; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <div class="login-page"> <div class="form"> <form id="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 id="login-form" method="POST" class="active-form" 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> </div> 

Also available in this codepen .

Answer 2

If you're relying on JavaScript then you have a few possible routes.

1. Use localStorage to set and get the state. https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
2. Use a cookie to set and get the state. https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie
3. Use a query string parameter as part of your url and use the Location api to get it. https://developer.mozilla.org/en-US/docs/Web/API/Location

Javascript has no way of remembering state so you must make use of a strategy such as the above. Personally I would opt for localStorage as it has a nice simple API.

Answer 3

You can use localStorage to store the state in your browser.

<div class="login-page">
        <div class="form">
            <form class="register-form" method="POST" id="register">
                <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" id="login">
                <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>


var fo;
$(document).ready(function(){

console.log(localStorage.getItem('form'))

$('form').click(function(){fo=$(this).attr('id');
localStorage.setItem('form',fo);
})
})

Working fiddle

Answer 4

You might consider using a URL fragment at the end of your form action attribute--eg <form action="example.com/#register"> .

URL fragments are typically used to jump to different sections on a page. So in this case, they're probably more semantically meaningful than other options like session storage, cookies, or query strings.

You just need to listen to the document's load event to determine which form is being targeted. Something like this:

$(function () {
    if (window.location.hash == "register") {
        // show registration form here
    }
});