Question

我四处搜寻，但我找不到任何接近我想要的东西。我在同一页面上有一个登录表单和一个注册表单，一个接一个。我对jquery不太满意，我还在学习。我希望第一次登录，然后如果客户端没有帐户，请点击注册，登录表格将淡出，登记表格将在页面上的同一位置淡入。

请有人给我一个关于jquery代码的帮助。

<form action="" method="post">
<div class="field">
    <label for="username">Username</label>
    <input type="text" name="username" id="username" autocomplete="off">
</div>

<div class="field">
    <label for="password">Password</label>
    <input type="password" name="password" id="password" autocomplete="off">
</div>

<div class="field">
    <label for="remember">
    <input type="checkbox" name="remember" id="remember"> Remember me
    </label>
</div>
<input type="submit" value="Log in" class="login__submit">
<p class="login__signup">Don't have an account? &nbsp;<a>Sign up</a></p>
</form>

<form action="" method="post">
    <div class="field">
        <label for="username">Username</label>
        <input type="text" name="username" id="username" value="<?php  echo escape(Input::get('username')); //this is for sticky form ?>" autocomplete="off">
    </div>

    <div class="field">
        <label for="password">Password</label>
        <input type="password" name="password" id="password">
    </div>

    <div class="field">
        <label for="password_again">Password again</label>
        <input type="password" name="password_again" id="password_again">
    </div>

    <div class="field">
        <label for="name">Name</label>
        <input type="name" name="name" id="name" value="<?php echo escape(Input::get('name')); ?>">
    </div>

    <input type="hidden" name="token" value="<?php echo Token::generate(); ?>">
    <input type="submit" value="Register">
</form>

Answer 1

这是我在项目中使用的代码，用于在单击登录和注册按钮后显示和隐藏登录和注册表单

我创建了一个简单的jquery代码，用于禁用和启用relevent表单。

<script type="text/javascript" >
$("#login_btn").click(function() {
    console.log('login btn clicked');
    $("#registerForm").hide();
    $("#loginForm").show();


});

$("#register_btn").click(function() {
    console.log('regsiter btn clicked');
    $("#loginForm").hide();
    $("#registerForm").show();


});

Answer 2

试试这个::

<div id="signin_div">

<form action="" method="post">
<div class="field">
    <label for="username">Username</label>
    <input type="text" name="username" id="username" autocomplete="off">
</div>

<div class="field">
    <label for="password">Password</label>
    <input type="password" name="password" id="password" autocomplete="off">
</div>

<div class="field">
    <label for="remember">
    <input type="checkbox" name="remember" id="remember"> Remember me
    </label>
</div>
<input type="submit" value="Log in" class="login__submit">
<p class="login__signup">Don't have an account? &nbsp;<a href="javascript:void(0)" id="showSignUp">Sign up</a></p>
</form>

</div>

<div id="signup_div">

<form action="" method="post">
    <div class="field">
        <label for="username">Username</label>
        <input type="text" name="username" id="username" value="<?php  echo escape(Input::get('username')); //this is for sticky form ?>" autocomplete="off">
    </div>

    <div class="field">
        <label for="password">Password</label>
        <input type="password" name="password" id="password">
    </div>

    <div class="field">
        <label for="password_again">Password again</label>
        <input type="password" name="password_again" id="password_again">
    </div>

    <div class="field">
        <label for="name">Name</label>
        <input type="name" name="name" id="name" value="<?php echo escape(Input::get('name')); ?>">
    </div>

    <input type="hidden" name="token" value="<?php echo Token::generate(); ?>">
    <input type="submit" value="Register">
</form>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script>

$(document).ready(function(){
    $("#showSignUp").click(function(){
        $("#signin_div").hide();
        $("#signup_div").show();

    });
});

</script>

Answer 3

    $(document).ready(function(){
    $("#log_in").click(function(){
        $(".login_form").css('display', 'none');
        $(".display_none").css('display', 'block');
    });
});

.display_none
{
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="login_form">
        <form action="" method="post">
        <div class="field">
            <label for="username">Username</label>
            <input type="text" name="username" id="username" autocomplete="off">
        </div>

        <div class="field">
            <label for="password">Password</label>
            <input type="password" name="password" id="password" autocomplete="off">
        </div>

        <div class="field">
            <label for="remember">
            <input type="checkbox" name="remember" id="remember"> Remember me
            </label>
        </div>
        <input type="submit" value="Log in" class="login__submit">
        <p class="login__signup">Don't have an account? &nbsp;<a href="#" id="log_in">Sign up</a></p>
        </form>
        </div>
        <div class ="display_none">
        <form action="" method="post">
        <div class="field">
            <label for="username">Username</label>
            <input type="text" name="username" id="username"  autocomplete="off">
        </div>

        <div class="field">
            <label for="password">Password</label>
            <input type="password" name="password" id="password">
        </div>

        <div class="field">
            <label for="password_again">Password again</label>
            <input type="password" name="password_again" id="password_again">
        </div>

        <div class="field">
            <label for="name">Name</label>
            <input type="name" name="name" id="name" >
        </div>

        <input type="hidden" name="token" >
        <input type="submit" value="Register">
        </form>
        </div>

Answer 4

这是我正在寻找的结果：

<script>

$(document).ready(function(){
    $(".register").hide();
    $("#showSignUp").click(function(event){
        event.preventDefault();
        $(".login").fadeToggle("slow");
        $(".register").toggle(1000);

    });
});

</script>

在html代码中没有插入任何js，或修改css页面。

使用jquery切换登录表单以注册表单

4 个答案: