html jquery在两种形式之间切换[关闭]答案

【问题标题】：html jquery toggle between two forms [closed]html jquery在两种形式之间切换[关闭]
【发布时间】：2015-03-10 01:00:08
【问题描述】：

我在一个 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>

谢谢！

【问题讨论】：

使用visibility，一个CSS属性，交替显示/隐藏div

标签： javascript php jquery html ajax

【解决方案1】：

使用 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 文档中，您可以使用属性 display: none;

【讨论】：

您好，谢谢，工作正常，但有没有办法让我只显示登录表单并隐藏注册表单来打开页面？
@Spud91 我相应地编辑了我的答案。