使用CSS和jQuery隐藏/显示表单字段

Question

与此example中所述，我可以根据组合框中的选定项目显示或隐藏特定组中的某些表单元素。

我想做的是保持相同的行为，但使用链接。例如，第一组是：

如果我点击加入我们，我想切换（显示）到第二组（并隐藏第一组），如下所示：

..周期性地。

基本HTML：

<div id="registrate" class="group1">
<form action="#" method="post" class="regform">
    <h1><span class="log-in">Log in</span> or <span class="sign-up">sign up</span></h1>

    <p class="float group1_opts">
       <input type="text" name="nickname" id="nickname" placeholder="Username or Email..">
    </p>

    <p class="float group2_opts">
       <input type="text" name="nickname" id="nickname" placeholder="Email..">
    </p>
    <p class="float group2_opts">
       <input type="text" name="nickname" id="nickname" placeholder="Confirm Email..">
    </p>

    <p class="float">
       <input type="password" name="password" placeholder="Password.." required><br/>
    </p>

    <p class="float group2_opts">
       <input type="password" name="password" placeholder="Confirm Password.." required><br/>
    </p>

    <p>
        <div class="remember">
            <input type="checkbox" name="remember" value="None" id="remember">
            <label for="remember"></label>
        </div>
        <label for="remember" class="remembermelabel">Remember Me</label>
    </p> 

    <p class="submit">
        <div class="button">
            <input type="submit" name="submit" value="Login">
        </div>
    </p>
    <h1></h1>
    <p class="change_link group1_opts"> Not a member yet?&nbsp;
        <a href="" class="to_register">Join us</a>
    </p>
    <p class="change_link group2_opts"> Are you just a member?&nbsp;
        <a href="" class="to_login">Login</a>
    </p>
</form> 

基本CSS：

.group1_opts, .group2_opts {
   display: none;
}

.group1 .group1_opts, .group2 .group2_opts {
   display: block;
}

有一种方法可以使用链接而不是组合框来获得这个，就像在另一个例子中一样？ 谢谢

Answer 1

绑定到点击事件，并显示和隐藏相关字段：

$('.to_register').click(function() {
  $('.group1_opts').hide();
  $('.group2_opts').show();
});
$('.to_login').click(function() {
  $('.group1_opts').show();
  $('.group2_opts').hide();
});

请注意，您不需要使用CSS来执行此操作 - jQuery将负责隐藏/显示元素。

Answer 2

@BigChris提出了一个很好的观点，它值得回答。

您打算如何判断是否有人提交了＃34;注册＆＃34;或者＆＃34;登录＆＃34;？只是观察正确的输入字段是不可行的，因为有可能某人启动来填写注册表单，但随后切换到登录表单。

现在，您只有一个表单，只有一个提交按钮。

为了清楚起见，并提供明确的分离，不仅在您的标记中，而且在服务器上的表单处理中，我强烈强烈建议您将标记更改为两个完全独立的表单。如果你不愿意/能够做到这一点，那么至少要创建两个按钮。

以下是基于两种形式概念的修订HTML：

<div id="registrate" class="group1">
<h1><span class="log-in">Log in</span> or <span class="sign-up">sign up</span></h1>
<!-- The first form contains only registration info, and a submit named register -->
<form action="#" method="post" class="to_register">
    <p class="float">
       <input type="text" name="nickname" id="nickname" placeholder="Email..">
    </p>
    <p class="float">
       <input type="text" name="nickname" id="nickname" placeholder="Confirm Email..">
    </p>

    <p class="float">
       <input type="password" name="password" placeholder="Password.." required><br/>
    </p>
    <p class="float">
       <input type="password" name="password" placeholder="Confirm Password.." required><br/>
    </p>
    <p class="submit">
        <div class="button">
            <input type="submit" name="register" value="Login">
        </div>
    </p>
</form>
<!-- The second form is purely login, and has a submit named login -->
<form action="#" method="post" class="to_login">
    <p class="float">
       <input type="text" name="nickname" id="nickname" placeholder="Username or Email..">
    </p>
    <p class="float">
       <input type="password" name="password" placeholder="Password.." required><br/>
    </p>
    <p>
        <div class="remember">
            <input type="checkbox" name="remember" value="None" id="remember">
            <label for="remember"></label>
        </div>
        <label for="remember" class="remembermelabel">Remember Me</label>
    </p> 
    <p class="submit">
        <div class="button">
            <input type="submit" name="login" value="Login">
        </div>
    </p>
</form> 
    <h1></h1>
    <p class="change_link group1_opts"> Not a member yet?&nbsp;
        <a href="" class="to_register">Join us</a>
    </p>
    <p class="change_link group2_opts"> Are you just a member?&nbsp;
        <a href="" class="to_login">Login</a>
    </p>
 </div>

请注意，我已更改了表单的类，并删除了p标记上的类。表单的类与链接的类匹配，因此jQuery更简单。

然后，你的jQuery变成了：

jQuery(function($) {
    $('a.to_register, a.to_login').click(function(event) {
        event.preventDefault();
        var cname = $(this).attr('class');
        $('form.' + cname).show();
        $('form').not('.' + cname).hide();
    });
});

现在，根据您的服务器端语言，您可以查看$_POST['register']或$_POST['login']（提交按钮的名称），以检测他们点击了哪些内容以及他们的意图。< / p>

Answer 3

使用jQuery你可以这样做：

$(document).ready(function(){

    $('.to_register, .to_login').click(function() {
         $('.group1_opts').toggle();
         $('.group2_opts').toggle();
    });

});

编辑：只要隐藏正确的内容并在第一时间显示

，这就有效

Answer 4

在JavaScript中（抱歉，我不使用jQuery）：

为此，您需要使用JavaScript中的onclick操作，并将您的地址“加入我们”改为“＃”，以使其保持在同一页面上。实际上，您可以使用onclick几乎所有内容，因此可以随意使用<p>，<img>或其他任何内容。 要使消失/显示您的输入，只需使用：

function hide(id)
{
    var element = document.getElementById(id);
    element.style ="display: none;";
}

此外，您可以将<p>的值从“加入我们”更改为“登录”，还可以使用onclick更改要呼叫的操作（在隐藏/显示（ID）和element.setAttribute("onclick", full_function);）。

Answer 5

老实说，我会分两种形式。代码非常简单，您可以在表单中设置两个不同的操作。 - 演示：http://jsfiddle.net/hCmr6/

jQuery的：

$('.to_register, .to_login').click(function (e) {
    e.preventDefault();
    $('.loginform, .regform').slideToggle(400);
});

HTML：

<div id="registrate" class="group1">
    <h1><span class="log-in">Log in</span> or <span class="sign-up">sign up</span></h1>
    <form action="#" method="post" class="loginform">
        <p class="float group1_opts">
            <input type="text" name="nickname" id="nickname" placeholder="Username or Email.." />
        </p>
        <p class="float">
            <input type="password" name="password" placeholder="Password.." required />
            <br/>
        </p>
        <p class="float group2_opts"></p>
        <p>
            <div class="remember">
                <input type="checkbox" name="remember" value="None" id="remember" />
                <label for="remember"></label>
            </div>
            <label for="remember" class="remembermelabel">Remember Me</label>
        </p>
        <p class="submit">
            <div class="button">
                <input type="submit" name="submit" value="Login" />
            </div>
        </p>
         <h1></h1>

        <p class="change_link group1_opts">Not a member yet?&nbsp; <a href="" class="to_register">Join us</a>

        </p>
    </form>


    <form action="#" method="post" class="regform">
        <p class="float group1_opts">
            <input type="text" name="nickname" id="nickname" placeholder="Username or Email.." />
        </p>
        <p class="float group2_opts">
            <input type="text" name="nickname" id="nickname" placeholder="Email.." />
        </p>
        <p class="float group2_opts">
            <input type="text" name="nickname" id="nickname" placeholder="Confirm Email.." />
        </p>
        <p class="float">
            <input type="password" name="password" placeholder="Password.." required />
            <br/>
        </p>
        <p class="float group2_opts">
            <input type="password" name="password" placeholder="Confirm Password.." required />
            <br/>
        </p>
        <p>
            <div class="remember">
                <input type="checkbox" name="remember" value="None" id="remember" />
                <label for="remember"></label>
            </div>
            <label for="remember" class="remembermelabel">Remember Me</label>
        </p>
        <p class="submit">
            <div class="button">
                <input type="submit" name="submit" value="Login" />
            </div>
        </p>
        <p class="change_link group2_opts">Are you just a member?&nbsp; <a href="" class="to_login">Login</a>

        </p>
    </form>
</div>

希望这有帮助！如果您有任何问题，请告诉我们！