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

Question

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

这个问题是Flask应用程序的一部分。我试图只在第一部分之后运行第二部分，因为否则我会有一个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>

如何在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>

检查输入字段是否包含值。因为这只针对前端，如果你不验证后端数据，你会有安全问题。

你也有安全问题如果你把你的"secret"代码直接在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";
}
}