Скрыть / Показать форму по нажатию кнопки во Фляге - PullRequest
Новая
       16

Скрыть / Показать форму по нажатию кнопки во Фляге

0 голосов
/ 03 декабря 2018

Я учился создавать веб-форму wtf Flask, которая была: 

class Update(FlaskForm):
    username = StringField('Username', validators=[DataRequired()])
    email = StringField('Email', validators=[DataRequired(), Email()])
    pic = FileField('Update Profile Pic', validators=[FileAllowed(['jpg','png'])])
    submit = SubmitField('Update')

Я хотел сделать так, чтобы форма загружалась на одну и ту же страницу одним нажатием кнопки без создания отдельной html-страницы.для формы.Как это можно сделать с помощью Flask или HTML?Если необходимо внести какие-либо изменения в маршрут, также укажите это.

HTML-код: 

<div class="content-section">
            <form method="POST" action="" enctype="multipart/form-data">
                {{ form.hidden_tag() }}
                <fieldset class="form-group">
                    <legend class="border-bottom mb-4">Account Info</legend>
                    <div class="form-group">
                        {{ form.username.label(class="form-control-label") }}

                        {% if form.username.errors %}
                        {{ form.username(class="form-control form-control-lg is-invalid") }}
                        <div class="invalid-feedback">
                            {% for error in form.username.errors %}
                            <span>{{ error }}</span>
                            {% endfor %}
                        </div>
                        {% else %}
                        {{ form.username(class="form-control form-control-lg") }}
                        {% endif %}
                    </div>
                    <div class="form-group">
                        {{ form.email.label(class="form-control-label") }}
                        {% if form.email.errors %}
                        {{ form.email(class="form-control form-control-lg is-invalid") }}
                        <div class="invalid-feedback">
                            {% for error in form.email.errors %}
                            <span>{{ error }}</span>
                            {% endfor %}
                        </div>
                        {% else %}
                        {{ form.email(class="form-control form-control-lg") }}
                        {% endif %}
                    </div>
                    <div class="form-group">
                        {{ form.pic.label() }}
                        {{ form.pic(class="form-control-file") }}
                        {% if form.pic.errors %}
                        {% for error in form.picture.errors %}
                        <span class="text-danger">{{error}}</span><br>
                        {% endfor %}
                        {% endif %}
                    </div>
                </fieldset>
                <div class="form-group">
                    {{ form.submit(class="btn btn-outline-info") }}
                </div>
            </form>

1 Ответ

0 голосов
/ 03 декабря 2018

Вы можете загрузить свою форму в обычном режиме и установить ее видимость на hidden.Если кто-то нажимает на кнопку, просто измените видимость формы на visible.

Пример ниже: 

function toggle_display(){
  el = document.querySelector('.content_section');
  
  if(el.style.visibility == 'hidden'){
      el.style.visibility = 'visible'
  }else{
     el.style.visibility = 'hidden'
  }
}
<button onclick="toggle_display()">Toggle display</button>

<div class="content_section">See me no more</div>

РЕДАКТИРОВАТЬ:

Еще один момент, о котором следует упомянуть, свойство visibility, если установлено значение hidden, занимает место, даже если оно скрыто,Чтобы полностью удалить пространство, которое будет принимать форма, и скрыть форму, установите для свойства display значение none.Чтобы показать это снова, установите display в block.

...