Как выставить форму, когда установлен переключатель? - PullRequest
Новая
       4

Как выставить форму, когда установлен переключатель?

0 голосов
/ 31 марта 2020

Рассмотрим следующий образец html шаблона, 

<html>
  <body>
    <input type="radio" name="x">x</input><br>
    <input type="radio" name="y">y</input><br>
    <form name="form1"> Form1... </form>
    <form name="form2"> Form2... </form>
  </body>
</html>

Код flask для отрисовки шаблона, 

from flask import (Flask, render_template)

app = Flask(__name__)

@app.route('/')
def main():
    return render_template('sample.html')

После того, как шаблон отрендерен с помощью flask, Я хотел бы показать form1, если установлен переключатель x, и form2, если установлен переключатель y. Можно ли это сделать, используя синтаксис jinja templates?

Что-то похожее на это 

<html>
  <body>
    <input type="radio" name="x">x</input><br>
    <input type="radio" name="y">y</input><br>

    {% if x %}
      <form name="form1"> Form1... </form>
    {% elif y %}
      <form name="form2"> Form2... </form>
    {% else %}
       Something...
    {% endif %}

  </body>
</html>

Также есть что-то похожее на document.getElementById() в jinja шаблонах?

1 Ответ

1 голос
/ 31 марта 2020

Языки шаблонов, такие как Jinja, работают только с бэкэнд-вводом. Они служат для визуализации начального HTML. Для активного управления страницей после ее загрузки вам нужно будет использовать javascript (и чуть-чуть css). Сначала вам понадобится класс css, который сообщает форме, чтобы она оставалась вне поля зрения, пока вы не решите показать ее со свойством display: none. Давайте назовем этот класс «скрытым». Ваш css будет выглядеть примерно так: 

.hidden {
  display: none;
}

Во-вторых, чтобы обе формы начали скрываться, вам необходимо добавить этот класс в их объявление HTML, например: 

<form class="hidden" name="form1"> Form1... </form>
<form class="hidden" name="form2"> Form2... </form>

Затем вы захотите добавить Javascript слушателей к каждой из переключателей. Событие onchange идеально подходит для этой ситуации. Вы захотите удалить или добавить этот «скрытый» класс в правильную форму, когда любой из переключателей изменит состояние. Здесь я использую свойство « флажок » кнопок, чтобы увидеть, были ли они просто переведены в состояние «ВКЛ» или «ВЫКЛ»: 

radioX.addEventListener('change',(event)=>{
  if (event.target.checked){
    form1.classList.remove("hidden");
    form2.classList.add("hidden");
  } else {
    form1.classList.add("hidden");
    form2.classList.remove("hidden");
  }
});

Наконец, весь файл HTML будет выглядеть примерно так: 

<html>
<head>
  <style>
    .hidden{
      display:none;
    }
  </style>
</head>
<body>
  <input id="radio-x" type="radio" name="form-toggle">x</input><br>
  <input id="radio-y" type="radio" name="form-toggle">y</input><br>

  <form class="hidden" name="form1"> Form1... </form>
  <form class="hidden" name="form2"> Form2... </form>

  <script>
    const form1 = document.querySelector("form[name='form1']");
    const form2 = document.querySelector("form[name='form2']");

    document.querySelector('#radio-x').addEventListener('change',(event)=>{
      if (event.target.checked){
        form1.classList.remove("hidden");
        form2.classList.add("hidden");
      } else {
        form1.classList.add("hidden");
        form2.classList.remove("hidden");
      }
    });

    document.querySelector('#radio-y').addEventListener('change',(event)=>{
      if (event.target.checked){
        form1.classList.add("hidden");
        form2.classList.remove("hidden");
      } else {
        form1.classList.remove("hidden");
        form2.classList.add("hidden");
      }
    });
  </script>
</body>
</html>
...