Question

我希望在用户提交表单后显示加载GIF，但如果用户未能填写必填字段并收到表单填写错误，则不显示。

这就是我所做的：

 {% if not profile_form.errors %}

    <input type="submit" value="Submit" class="btn btn-primary btn-lg " onclick="loading();" />
{% else %}
    <input type="submit" value="Submit" class="btn btn-primary btn-lg" />

{% endif %}

onclick="loading();加载GIF。

但它没有用。

如果我提交的话，如果用户没有填写必填字段，则显示加载的gif，这样可以看到表格被挂起。

这是功能：

function loading(){
    $("#loading").show();
    $("#content").hide();       
}

这是模板：

{% block body_block %}
<div id="loading"><img src= "{% static 'images/giphy.gif' %}"></div>

<div id="content" class="col-sm-6 col-sm-offset-3" style="margin-top: 100px;margin-bottom: 100px" >

<h1>Create Your Profile</h1>

    <form method="post" action="?next=/" enctype="multipart/form-data">
                {% csrf_token %}                     
                 {{ user_form|crispy }}
                 {{ profile_form|crispy }}

 {% if not profile_form.errors %}

    <input type="submit" value="Submit" class="btn btn-primary btn-lg " onclick="loading();" />
{% else %}
    <input type="submit" value="Submit" class="btn btn-primary btn-lg" />

{% endif %}
        </form>     

</div>
{% endblock %}

这就是CSS：

/*LOADING GIF*/
div#loading {
    display: none;
    cursor: wait;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
    }

Answer 1

你误解了这里的逻辑流程。在提交表单之后没有错误，并且视图重新呈现模板以显示这些错误。在首次提交表单时，根本不会出现任何错误，因此您的if语句始终为真。

正如Raja在评论中所说，唯一的方法是通过Ajax提交表单，然后通过JS显示gif。

如何根据返回的错误控制模板渲染？ Django的

1 个答案: