我试图只有两个表单中的一个POST取决于哪个按钮从btn-group被选中。目前所有的表单都没有POST问题，但是有两个表单只需要其中一个值。我试图在app.py中解析不需要的值，但没有成功，所以我决定尝试这样做，以便只发布一个或另一个值。
这是来自。html的代码，我有麻烦，这是一个字段集从一个更大的形式，其余的工作现在。
<fieldset class="row mb-3, container" id="program_value_form_id">
<legend for="value_range" class="col-sm-2 col-form-label">Value Range:</legend>
<p>
<div class="btn-group, com-sm-1" role="group" aria-label="Basic radio toggle button group">
<input type="radio" onchange="swapConfig(this)" class="btn-check" name="btnradio_valuer" id="btnradio_value1" autocomplete="off" value="valuerange1" checked>
<label class="btn btn-outline-primary" for="btnradio_value1">100-200</label>
<input type="radio" onchange="swapConfig(this)" class="btn-check" name="btnradio_valuer" id="btnradio_valuer2" autocomplete="off" value="valuerange2">
<label class="btn btn-outline-primary" for="btnradio_valuer2">400-500mhz</label>
</div>
</p>
<div id="btnradio_valuer1Swap">
<label for="value" class="col-sm-2 col-form-label">Value:</label>
<p>
<div class="col-sm-4">
<input id="value1" type="number" class="form-control" placeholder="xxx.xxx 100-200" name="value1" step="0.001" min="100" max="200">
<span class="validity"></span>
</div>
</p>
</div>
<div id="btnradio_valuer2Swap" style="display:none">
<label for="value" class="col-sm-2 col-form-label">Value:</label>
<p>
<div class="col-sm-4">
<input id="value2" type="number" class="form-control" placeholder="xxx.xxx 400-500" name="value2" step="0.001" min="400" max="500">
<span class="validity"></span>
</div>
</p>
</div>
</fieldset>
表单交换取决于按钮点击。这是我从这里得到的用来交换它们的js。
<script>
function swapConfig(x) {
var radioName = document.getElementsByName(x.name);
for(i = 0 ; i < radioName.length; i++){
document.getElementById(radioName[i].id.concat("Swap")).style.display="none";
}
document.getElementById(x.id.concat("Swap")).style.display="initial";
}
</script>
我试过if语句，if在for语句里面，没有一个工作。在挫折中，我删除了它们，但如果需要的话，我可以尝试重新编写它们，尽管我对它们的期望并不高，因为我的html经验有限。请让我知道是否需要对我所写的内容进行任何更正，或者是否有更好的方法或地方来做我正在尝试做的事情。
下面的示例允许您排除和隐藏表单的某些部分。
当字段集或输入被禁用时，它不再是可以在服务器端查询的表单数据的一部分。因此，根据单选按钮的值，通过指定数据集属性引用的表单部分将被禁用。JavaScript代码激活和取消激活表单中不需要的元素。
还可以使用disabled属性更改某些元素的外观。为此需要额外的样式表规则。因此，当所包含的输入字段被禁用时，表单的一整行将被隐藏。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
<style>
/*
Toggle the appearance of the row containing an input field whose property
has been set to disabled.
*/
div.row:has(input.value-control[disabled]) {
display: none;
}
</style>
</head>
<body>
<div class="container my-4">
<form method="post">
<div class="row mb-3">
<!-- The button group to switch between the form parts. -->
<div class="col btn-group" role="group" aria-label="Basic radio toggle button group">
<!-- The data-target and data-parent properties reference the parts to be switched. -->
<input
id="btnradio1"
class="btn-check"
name="btnradio"
type="radio"
autocomplete="off"
data-parent=".value-control"
data-target="#value-control-1"
checked
>
<label class="btn btn-outline-primary" for="btnradio1">100-200 Mhz</label>
<input
id="btnradio2"
class="btn-check"
name="btnradio"
type="radio"
autocomplete="off"
data-parent=".value-control"
data-target="#value-control-2"
>
<label class="btn btn-outline-primary" for="btnradio2">400-500 Mhz</label>
</div>
</div>
<div class="row mb-3">
<label for="value-control-1" class="col-sm-2 col-form-label">Value:</label>
<div class="col-sm-10">
<!--
The references of the radio buttons refer to the class and id attributes
of the input field.
-->
<input
id="value-control-1"
class="form-control value-control"
name="value"
type="number"
step="0.001" min="100" max="200"
placeholder="xxx.xxx 100-200"
required
>
</div>
</div>
<div class="row mb-3">
<label for="value-control-2" class="col-sm-2 col-form-label">Value:</label>
<div class="col-sm-10">
<input
id="value-control-2"
class="form-control value-control"
name="value"
type="number"
step="0.001" min="400" max="500"
placeholder="xxx.xxx 400-500"
required
disabled
>
</div>
</div>
<div class="d-grid">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<script type="text/javascript">
(() => {
// Wait for the document content to load. This listener is not absolutely
// necessary at this point, since the script element is at the end of the document.
window.addEventListener('DOMContentLoaded', () => {
// Select the toggle buttons based on their properties.
const radioSel = 'input[name="btnradio"][data-target][data-parent]';
const radioBtns = document.querySelectorAll(radioSel);
radioBtns.forEach(btn => {
// Register a listener for the change event for each element found.
btn.addEventListener('change', evt => {
// Change the disabled property of the referenced elements.
const parent = document.querySelectorAll(evt.target.dataset.parent);
const target = document.querySelector(evt.target.dataset.target);
parent.forEach(elem => elem.disabled = true );
target && (target.disabled = !evt.target.checked);
});
});
});
})();
</script>
</body>
</html>
from flask import (
Flask,
render_template,
request
)
app = Flask(__name__)
@app.route('/', methods=['GET', 'POST'])
def index():
if request.method == 'POST':
print(request.form.get('value', type=float))
return render_template('index.html')
对于DOMContentLoaded的侦听器，代码的执行被延迟，直到HTML页面的内容被完全加载。
change事件的侦听器会注意到输入字段是否发生了更改。然后将更改字段存储为事件对象中的目标。基本上，使用的变体对应于添加一个onchange属性，该属性是可以添加的。然而，HTML和JavaScript的分离在这里做得更干净。
对于querySelector或querySelectorAll，可以使用选择器从文档中选择一个或多个元素。在本例中，将搜索标记和使用的类或id以及现有属性。这个选项给你比getElementById或getElementsByClassName更多的余地。
我使用forEach函数来遍历选中的元素。
dataset允许通过JavaScript读取和写入添加到元素中的自定义参数。这里用来描述表单中被引用的部分。
Arrow functions。然而，function关键字的正常方式总是可行的。