選中單選按鈕時如何公開表單？

Question

考慮以下示例 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')

一旦模板由燒瓶渲染，我想顯示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>

jinja模板中是否也有類似於document.getElementById()東西？

Answer 1

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>

選中單選按鈕時如何公開表單？

問題描述

1 個解決方案

解決方案1
1 2020-03-31 14:16:02

選中單選按鈕時如何公開表單？

問題描述

1 個解決方案

解決方案1 1 2020-03-31 14:16:02

解決方案1
1 2020-03-31 14:16:02