Question

当一个模板中有多个html表单（注册和登录）时，login_signup.html

此外，我还有两个views（注册和登录）直接模板，login_signup.html。

这是它的工作原理。

当我登录时（http://example.com/login），它会指向login_signup.html并仅显示login表单。（隐藏signup表格）
当我进行注册（http://example.com/signup）时，会直接转到login_signup.html并仅显示signup表单。（隐藏login表格）

我使用javascript

$(document).ready(function(){
    if ((window.location.pathname).indexOf('login') >= 0) {
        $('#signupbox').hide();
        $('#loginbox').show();
    } else {
        $('#loginbox').hide();
        $('#signupbox').show();
    }
});

问题是，当我想要进入注册页面（http://example.com/signup）时，它会在很短的时间内显示login个表单并隐藏它并显示signup表单。我认为这不是一个好的用户界面。

我怎样才能清楚地处理它？</ p>

这是我的整个template和javascript代码。 login_signup.html

{% extends 'chacha_dabang/skeleton/base.html' %}

{% load pipeline%}

{% block content %}
    <div class="container">
        <div id="loginbox" class="mainbox">
            <div class="panel panel-info">
                <div class="panel-heading">
                    <div class="panel-title">Sign In</div>
                </div>

                <div class="panel-body">
                    <div id="login-alert" class="alert alert-danger col-sm-12"></div>
                    <form id="loginform" class="form-horizontal" role="form" method="post" action="{% url 'users:login' %}">
                        {% csrf_token %}
                        <!-- id / pw -->
                        <div class="input-group">
                            <span class="input-group-addon"><i class="icon-user"></i></span>
                            <input id="id_username" type="text" class="form-control" name="username" value="" placeholder="username">
                        </div>
                        <div class="input-group">
                            <span class="input-group-addon"><i class="icon-lock"></i></span>
                            <input id="id_password" type="password" class="form-control" name="password" placeholder="password">
                        </div>

                        <div class="form-group">
                            <!-- Button -->
                            <div class="btn-controls">
                                <div class="row">
                                    <input id="btn-login" class="btn btn-success" type="submit" name="login_submit" value="로 그 인" />
                                    <input type="hidden" name="next" value={{ request.GET.next}} />
                                    <a id="btn-fblogin" href="{% url 'social:begin' backend='facebook' %}" class="btn btn-primary col-xs-12"><i class="icon-facebook"></i> 1초만에 페이스북으로 로그인 </a>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-12 control">
                                <div class="signup">
                                    아직 차차다방 회원이 아니세요? &nbsp
                                    <a href="#" id="signuplink"> 가입하기 </a>
                                </div>
                                <div class="forget">
                                    <a href="#"> 비밀번호를 잊어버리셨나요? </a>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>  <!-- <div class="panel-body" > -->

            </div>  <!-- <div class="panel panel-info"> -->
        </div>  <!-- <div id="loginbox"> -->


        <!-- Sign up Form -->
        <div id="signupbox" class="mainbox">
            <div class="panel panel-info">
                <div class="panel-heading">
                    <div class="panel-title">Sign Up</div>
                </div>

                <div class="panel-body">
                    <form id="signupform" class="form-horizontal" role="form" method="post" action="{% url 'users:signup' %}">
                        {% csrf_token %}
                        <!-- signup -->
                        <div id="signupalert" class="alert alert-danger">
                            <p>Error:</p>
                            <span></span>
                        </div>
                        <!-- id / pw -->
                        <table id="signup-table">
                            <col width="30%">
                            <col width="70%">
                            <tr>
                                <td class="label-tag">{{ form.username.label_tag }}</td>
                                <td class="value">{{ form.username }}</td>
                                {{ form.errors.username }}
                            </tr>
                            <tr>
                                <td class="label-tag">{{ form.password1.label_tag }}</td>
                                <td class="value">{{ form.password1 }}</td>
                                {{ form.errors.password1 }}
                            </tr>
                            <tr>
                                <td class="label-tag">{{ form.password2.label_tag }}</td>
                                <td class="value">{{ form.password2 }}</td>
                                {{ form.errors.password2 }}
                            </tr>
                            <tr>
                                <td class="label-tag">{{ form.name.label_tag }}</td>
                                <td class="value">{{ form.name }}</td>
                                {{ form.errors.name }}
                            </tr>
                            <tr>
                                <td class="label-tag">{{ form.gender.label_tag }}</td>
                                <td class="value">{{ form.gender }}</td>
                                {{ form.errors.gender }}
                            </tr>
                            <tr>
                                <td class="label-tag">{{ form.birth.label_tag }}</td>
                                <td class="value">{{ form.birth }}</td>
                                {{ form.errors.birth }}
                            </tr>
                            <tr>
                                <td class="label-tag">{{ form.phone_number.label_tag }}</td>
                                <td class="value">{{ form.phone_number }}</td>
                                {{ form.errors.phone_number }}
                            </tr>
                            <tr>
                                <td class="label-tag">{{ form.job.label_tag }}</td>
                                <td class="value">{{ form.job }}</td>
                                {{ form.errors.job}}
                            </tr>
                        </table>

                        <div class="form-group">
                            <!-- Button -->
                            <div class="btn-controls">
                                <div class="row">
                                    <input id="btn-signup" class="btn btn-success" type="submit" name="signup_submit" value="가 입 하 기" />
                                    <a id="btn-fblogin" href="{% url 'social:begin' backend='facebook' %}" class="btn btn-primary col-xs-12"><i class="icon-facebook"></i>1초만에 페이스북으로 로그인</a>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-12 control">
                                <div class="login">
                                    이미 차차다방 회원이신가요? &nbsp
                                    <a href="#" id="loginlink"> 로그인하기 </a>
                                </div>
                            </div>
                        </div>
                    </form>
                </div> <!-- <div class="panel-body"> -->

            </div>  <!-- <div class="panel panel-info"> -->
        </div> <!-- <div id="signupbox"> -->

    </div> <!-- <div class="container"> -->
{% endblock %}

{% block custom_js %}
    {% javascript "login_signup" %}
{% endblock %}

login_signup.js

$("#signuplink").click(function(){
    $('#loginbox').hide();
    $('#signupbox').show();
});

$("#loginlink").click(function(){
    $('#signupbox').hide();
    $('#loginbox').show();
});


$(document).ready(function(){
    if ((window.location.pathname).indexOf('login') >= 0) {
        $('#signupbox').hide();
        $('#loginbox').show();
    } else {
        $('#loginbox').hide();
        $('#signupbox').show();
    }
});

Answer 1

尝试：

100px

然后使用javascript：

y = height * tan(20 degrees)

但我仍然建议使用不同的html文件来处理注册和登录。

如何在一个模板（Django）中清楚地切换两个表单？

1 个答案: