Flask select 通过单击按钮形成 POST
Flask select which form to POST by button click
我试图只使用两种形式中的一种 POST，具体取决于选择了 btn 组中的哪个按钮。目前所有形式 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 的内部，none 有效。我沮丧地删除了它们，但如果需要它们，我可以尝试重写它们，但由于我的 html 经验有限，我对它们的期望不高。请让我知道是否需要对我所写的内容进行任何更正，或者是否有更好的方法或地点来完成我正在尝试做的事情。
以下示例允许您排除和隐藏部分表单。
当字段集或输入被禁用时，它不再是可以在服务器端查询的表单数据的一部分。因此，根据单选按钮的值，通过指定数据集属性引用的表单部分将被禁用。 JavaScript 代码激活和停用不需要的表单元素。
某些元素的外观也可以使用禁用 属性 进行更改。为此需要额外的样式 sheet 规则。因此，当包含的输入字段被停用时，整行表单将被隐藏。
<!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 or the querySelectorAll 可以使用选择器从文档中选择一个或多个元素。在这种情况下，它会搜索标签并使用 类 或 ID 和现有属性。这个选项比 getElementById 或 getElementsByClassName.
给你更多的余地
我使用 forEach 函数迭代选定的元素。
A dataset 允许通过 JavaScript 读取和写入添加到元素的自定义参数。此处用于描述表格的引用部分。
基本上，JavaScript中有几种写函数的方法。 Arrow functions 用于示例中。但是，使用 function 关键字的正常方法总是可行的。
我试图只使用两种形式中的一种 POST，具体取决于选择了 btn 组中的哪个按钮。目前所有形式 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 的内部，none 有效。我沮丧地删除了它们，但如果需要它们，我可以尝试重写它们，但由于我的 html 经验有限，我对它们的期望不高。请让我知道是否需要对我所写的内容进行任何更正，或者是否有更好的方法或地点来完成我正在尝试做的事情。
以下示例允许您排除和隐藏部分表单。
当字段集或输入被禁用时，它不再是可以在服务器端查询的表单数据的一部分。因此，根据单选按钮的值，通过指定数据集属性引用的表单部分将被禁用。 JavaScript 代码激活和停用不需要的表单元素。
某些元素的外观也可以使用禁用 属性 进行更改。为此需要额外的样式 sheet 规则。因此，当包含的输入字段被停用时，整行表单将被隐藏。
<!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 or the querySelectorAll 可以使用选择器从文档中选择一个或多个元素。在这种情况下，它会搜索标签并使用 类 或 ID 和现有属性。这个选项比 getElementById 或 getElementsByClassName.
我使用 forEach 函数迭代选定的元素。
A dataset 允许通过 JavaScript 读取和写入添加到元素的自定义参数。此处用于描述表格的引用部分。
基本上，JavaScript中有几种写函数的方法。 Arrow functions 用于示例中。但是，使用 function 关键字的正常方法总是可行的。