如何在html中实现条件逻辑？

Question

我试图确保仅在我通过表单成功提交所需信息后才执行 HTML 页面的第二部分。

这个问题是 Flask 应用程序的一部分。 我试图仅在Part I之后运行Part II ，否则我将有一个 python 流 webcan 函数自动运行。

<!--Part I -->

<form id="form" action="{{ url_for("index")}}" method="post">

     <div class="row" >
        <div class="col s4">
            <label class="name-info" for="txtName">Name:</label>
            <input name="host" id="txtName" />
        </div>

        <div class="col s4">
            <label class="age-info" for="txtAge">Age:</label>
            <input name="port" id="txtAge" />
        </div>      
    </div>
</form>

<!--Part II -->

<div class="container">
    <div class="col-lg-8">
        <img src="{{ url_for('video_feed') }}">
     </div>
</div>
 

如何在单击按钮时变为 true 的 HTML 页面内创建 if 条件？

Answer 1

这取决于业务逻辑应该是什么以及它应该在后端还是前端。

根据您的问题，我假设以下内容：您有一个表单（第 1 部分），并且您希望仅在表单与所需数据一起提交时才显示其余代码（第 2 部分）。 如果是这样，这可能会有所帮助：

 document.getElementById('form').addEventListener('submit', (e) => { e.preventDefault(); if (document.getElementById('txtName').value.length > 0 && document.getElementById('txtAge').value.length > 0) { document.querySelector('.container').removeAttribute('hidden'); } });

 <!--Part I --> <form id="form" action='{{ url_for("index")}}' method="post"> <div class="row"> <div class="col s4"> <label class="name-info" for="txtName">Name:</label> <input name="host" id="txtName" /> </div> <div class="col s4"> <label class="age-info" for="txtAge">Age:</label> <input name="port" id="txtAge" /> </div> </div> <button type="submit">Submit</button> </form> <!--Part II --> <div class="container" hidden> <div class="col-lg-8"> <img src="{{ url_for('video_feed') }}"> </div> </div>

这将检查输入字段是否包含值。 由于这仅适用于前端，因此如果您不验证后端中的数据，您将遇到安全问题。

如果您将“秘密”代码直接放在 DOM 中，即使它是隐藏的，您也会遇到安全问题。 如果它是秘密的，您应该在需要时从服务器检索数据。

Answer 2

我建议使用 Django 将您的 python 代码与 HTML 表单无缝集成。

您可以使用 HTML + Javascript 来实现这一点，这是一个示例：

<button onclick="submitForm()">Submit</button>

<div id="myDIV">
  This is my DIV element.
</div>

Javascript：

function submitForm() {
  var x = document.getElementById("myDIV");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}