时间戳

首页 > 解决方案 > 选中单选按钮时如何公开表单？

javascript - 选中单选按钮时如何公开表单？

问题描述

考虑以下示例 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>

用于渲染模板的烧瓶代码，

from flask import (Flask, render_template)

app = Flask(__name__)

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

一旦模板由烧瓶呈现，我想显示form1是否选中单选按钮x以及form2是否选中y单选按钮。jinja是否可以使用模板语法来做到这一点？

类似的东西

<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

标签： javascriptpythonhtmlflaskjinja2

解决方案

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 事件非常适合这种情况。当任一单选按钮更改状态时，您将希望删除该“隐藏”类或将其添加到正确的表单中。在这里，我使用按钮的“ checked ”属性来查看它们是刚刚更改为 ON 状态还是 OFF 状态：

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>

推荐阅读