Javascript 在重新加载页面时保留相同的表单

我的页面上有两个表单，有一个按钮可以淡出当前表单，并带来另一个表单。基本上，这两种形式分别是登录和注册。单击按钮时，会在两者之间切换。下面是发生的情况：

登录表单是默认的当前表单，我单击按钮将表单更改为注册表单

然后单击注册表单的提交按钮，重新加载页面

然后像往常一样出现登录表单

问题来了，我希望表单最后是当前表单，即使在页面重新加载后也是当前表单

HTML:

<section id="content">
    <div id="logo" style="margin-left: 0;"></div>
    <div id="container">
        <form id="sign_up" action="login.php" method="post">
            <table style="margin: 0px auto;">
                <tr>
                    <td align="center"> <span style="font-weight: bold;font-size: 2em; color: Gray;">Sign Up</span>

                    </td>
                    <tr>
                        <td>
                            <input type="text" placeholder="Username" name="username" required="required" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="password" placeholder="Password" name="password" required="required" />
                            <br />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input class="input" type="password" placeholder="Confirm Password" name="confirm_password" required="required" />
                            <br />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <br/>
                        </td>
                    </tr>
                    <tr align="right">
                        <td>
                            <input class="btn" type="submit" value="Sign Up" name="submit_sign_up">
                        </td>
                    </tr>
            </table>
        </form>
        <form id="sign_in" action="login.php" method="post">
            <table style="margin: 0 auto;">
                <tr>
                    <td align="center"> <span style="font-weight: bold;font-size: 2em; color: Gray;">Sign In</span>

                    </td>
                    <tr>
                        <td>
                            <input class="input" type="text" placeholder="Username" name="username" required="required" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input class="input" type="password" placeholder="Password" name="password" required="required" />
                            <br />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <br/>
                        </td>
                    </tr>
                    <tr align="right">
                        <td>
                            <input class="btn" type="submit" value="Sign In" name="submit_sign_in">
                        </td>
                    </tr>
            </table>
        </form>
        <br/>
        <input id="sign_up_btn" class="btn" type="submit" style=" font-weight:bold; height:40px; width: 292px;" value="Create An Account"></input>
    </div>
</section>

#content {
    margin-top: 10%;
}
#container {
    margin: 0 auto;
    width: 80%;
    text-align: center;
}
input[type=text], input[type=password] {
    width: 250px;
    min-height: 25px;
    border-radius: 3px;
    border: 0;
    padding: 7px;
    font-family: Calibri;
    font-size: 20px;
    box-shadow: 0px 0px 3px 1px #aaa inset;
    box-sizing: border-box;
}
#sign_in, #sign_up {
    border: 1px solid #4f4f4f;
    border-radius: 10px;
    margin: 0 auto;
    height: 200px;
    width: 292px;
    padding: 10px;
    background-color: #eee;
    border: 0px;
    box-shadow: 0px 0px 15px 1px #000;
}
#sign_up {
    display: none;
    height: 250px;
}

jQuery(function ($) {

    var $sUp = $("#sign_up"),
        $sIn = $("#sign_in");

    $("#content").on('click', "#sign_up_btn", function () {

        $sIn.stop().fadeOut(800, function () {
            $sUp.fadeIn(800);
        });
        $(this).stop().fadeOut(800, function () {
            $(this).attr({
                value: "Already have an account?",
                id: "sign_in_btn"
            }).fadeIn(800);
        });

    }).on('click', "#sign_in_btn", function () {

        $sUp.stop().fadeOut(800, function () {
            $sIn.fadeIn(800);
        });
        $(this).stop().fadeOut(800, function () {
            $(this).attr({
                value: "Create An Account",
                id: "sign_up_btn"
            }).fadeIn(800);
        });

    });

});

JS:

<section id="content">
    <div id="logo" style="margin-left: 0;"></div>
    <div id="container">
        <form id="sign_up" action="login.php" method="post">
            <table style="margin: 0px auto;">
                <tr>
                    <td align="center"> <span style="font-weight: bold;font-size: 2em; color: Gray;">Sign Up</span>

                    </td>
                    <tr>
                        <td>
                            <input type="text" placeholder="Username" name="username" required="required" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="password" placeholder="Password" name="password" required="required" />
                            <br />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input class="input" type="password" placeholder="Confirm Password" name="confirm_password" required="required" />
                            <br />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <br/>
                        </td>
                    </tr>
                    <tr align="right">
                        <td>
                            <input class="btn" type="submit" value="Sign Up" name="submit_sign_up">
                        </td>
                    </tr>
            </table>
        </form>
        <form id="sign_in" action="login.php" method="post">
            <table style="margin: 0 auto;">
                <tr>
                    <td align="center"> <span style="font-weight: bold;font-size: 2em; color: Gray;">Sign In</span>

                    </td>
                    <tr>
                        <td>
                            <input class="input" type="text" placeholder="Username" name="username" required="required" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input class="input" type="password" placeholder="Password" name="password" required="required" />
                            <br />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <br/>
                        </td>
                    </tr>
                    <tr align="right">
                        <td>
                            <input class="btn" type="submit" value="Sign In" name="submit_sign_in">
                        </td>
                    </tr>
            </table>
        </form>
        <br/>
        <input id="sign_up_btn" class="btn" type="submit" style=" font-weight:bold; height:40px; width: 292px;" value="Create An Account"></input>
    </div>
</section>

#content {
    margin-top: 10%;
}
#container {
    margin: 0 auto;
    width: 80%;
    text-align: center;
}
input[type=text], input[type=password] {
    width: 250px;
    min-height: 25px;
    border-radius: 3px;
    border: 0;
    padding: 7px;
    font-family: Calibri;
    font-size: 20px;
    box-shadow: 0px 0px 3px 1px #aaa inset;
    box-sizing: border-box;
}
#sign_in, #sign_up {
    border: 1px solid #4f4f4f;
    border-radius: 10px;
    margin: 0 auto;
    height: 200px;
    width: 292px;
    padding: 10px;
    background-color: #eee;
    border: 0px;
    box-shadow: 0px 0px 15px 1px #000;
}
#sign_up {
    display: none;
    height: 250px;
}

jQuery(function ($) {

    var $sUp = $("#sign_up"),
        $sIn = $("#sign_in");

    $("#content").on('click', "#sign_up_btn", function () {

        $sIn.stop().fadeOut(800, function () {
            $sUp.fadeIn(800);
        });
        $(this).stop().fadeOut(800, function () {
            $(this).attr({
                value: "Already have an account?",
                id: "sign_in_btn"
            }).fadeIn(800);
        });

    }).on('click', "#sign_in_btn", function () {

        $sUp.stop().fadeOut(800, function () {
            $sIn.fadeIn(800);
        });
        $(this).stop().fadeOut(800, function () {
            $(this).attr({
                value: "Create An Account",
                id: "sign_up_btn"
            }).fadeIn(800);
        });

    });

});

---

最简单的方法是使用

localStorage

或

sessionStorage

保存表单的状态。如果您想做更多的工作，您可能需要考虑寻找一个处理页面状态的框架

gollowing在每个事件处理程序的

localStorage

中设置

lastForm

的值。定义处理程序后，如果

localStorage.lastForm

等于

sign\u

，它将更改当前表单

jQuery(function ($) {

    var $sUp = $("#sign_up"),
        $sIn = $("#sign_in");

    $("#content").on('click', "#sign_up_btn", function () {

        $sIn.stop().fadeOut(800, function () {
            $sUp.fadeIn(800);
        });
        $(this).stop().fadeOut(800, function () {
            $(this).attr({
                value: "Already have an account?",
                id: "sign_in_btn"
            }).fadeIn(800);
        });
        localStorage.lastForm = 'sign_up';
    }).on('click', "#sign_in_btn", function () {

        $sUp.stop().fadeOut(800, function () {
            $sIn.fadeIn(800);
        });
        $(this).stop().fadeOut(800, function () {
            $(this).attr({
                value: "Create An Account",
                id: "sign_up_btn"
            }).fadeIn(800);
        });
        localStorage.lastForm = 'sign_in';
    });

    if (localStorage.lastForm == 'sign_up') {
        $sIn.fadeOut(0);
        $sUp.fadeIn(0);
    }
});

---

我们不会为您编码，如果您有错误，请发布错误，如果没有，请缩小您的代码范围。存储cookie中最后可见的表单，然后在页面加载时检查cookie并设置正确的表单甚至不需要这样做。服务器端代码显然知道提交了哪个表单。使用该信息对提交后提供的页面进行适当调整，以便默认情况下显示相同的表单。