javascript - html jquery在两种形式之间切换

Closed. This question needs to be more focused。它当前不接受答案。












                            想改善这个问题吗？更新问题，使其仅通过editing this post专注于一个问题。

                        5年前关闭。




我在一个html页面上有两种形式
登录表单和注册表单

我希望能够在单击核心对应的“ span”按钮时在表格之间切换

该页面应仅显示登录表单，但登录和注册“ span”按钮都位于顶部

当我单击登录时，我希望登录表单“隐藏”，并显示注册表单，反之亦然。

这是我到目前为止的代码：

          <!DOCTYPE html>
    <head>
        <title>Login Form</title>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    </head>
    <body>

        <span href="#" class="btn btn-default" id="toggle-login">Log in</span>
        <span href="#" class="btn btn-default" id="toggle-register">Register</span>

            <div id="loginForm">

                <form id='login' action='' method='post' accept-charset='UTF-8'>
                <fieldset>
                    <legend>Log In</legend>
                    <p><input type="text" name="login" value="" placeholder="studentID"></p>
                    <p><input type="password" name="password" value="" placeholder="Password"></p>
                    <p class="submit"><input type="submit" name="commit" value="Login"></p>
                    </fieldset>
                </form>
            </div>

        <div id="registerForm">
    <form id='register' action='' method='post' accept-charset='UTF-8'>
        <fieldset >
            <legend>Register</legend>
                <input type='hidden' name='submitted' id='submitted' value='1'/>
                <p><label for='username' >UserName*:</label> <input type='text' name='username' id='username' maxlength="50" /></p>
                <p><label for='name'>First Name*: </label> <input type='text' name='name' id='firstName' maxlength="50" /></p>
                <p><label for='name'>Second Name*: </label> <input type='text' name='name' id='secondNname' maxlength="50" /></p>
                <p><label for='email' >Email Address*:</label> <input type='text' name='email' id='email' maxlength="50" /></p>
                <p><label for='password' >Password*:</label> <input type='password' name='password' id='password' maxlength="50" /></p>
                <input type='submit' name='Submit' value='Submit' />
                </fieldset>
                </form>
        </div>


        <script>

        </script>
    </body>
</html>

谢谢！

最佳答案

使用扩展自Erick Souza的答案。您也可以在不想验证的表单上添加“ formnovalidate”属性。这将导致一种形式在提交时进行验证，而另一种则无法通过。根据我的经验，您不能简单地隐藏一种形式并验证另一种形式。由于提交按钮将尝试验证两个表单。

这个想法可能看起来像：

$("#toggle-login").click(function(){
    $("#register").hide().attr("formnovalidate");
    $("#login").toggle();
});

$("#toggle-register").click(function(){
    $("#login").hide().attr("formnovalidate");
    $("#register").toggle();
});

要在页面加载时强制元素行为，应使用以下基本处理程序：

$("document").ready(function(){
    $("#register").hide();
};

这应该够了吧。或者在CSS文档中，可以使用属性显示：none;

关于javascript - html jquery在两种形式之间切换，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28904965/